JSFiddle - React, Tailwind, and code Playground

by Bouh

HTML

<script src="javascript.js">   /*!
 * @pixi/text - v6.0.1
 * Compiled Wed, 31 Mar 2021 22:45:32 UTC
 *
 * @pixi/text is licensed under the MIT License.
 * http://www.opensource.org/licenses/mit-license
 */
import { Sprite } from '@pixi/sprite';
import { Texture } from '@pixi/core';
import { settings } from '@pixi/settings';
import { Rectangle } from '@pixi/math';
import { hex2string, hex2rgb, string2hex, trimCanvas, sign } from '@pixi/utils';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */

var extendStatics = function(d, b) {
    extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) { if (b.hasOwnProperty(p)) { d[p] = b[p]; } } };
    return extendStatics(d, b);
};

function __extends(d, b) {
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

/**
 * Constants that define the type of gradient on text.
 *
 * @static
 * @constant
 * @name TEXT_GRADIENT
 * @memberof PIXI
 * @type {object}
 * @property {number} LINEAR_VERTICAL Vertical gradient
 * @property...

CSS

.htmlversion {
  width: 800px;
  background: #0f0;
  height: 300px;
}

.htmlversion .multi,
.htmlversion .single {
  background: white;
  font-family: Arial;
  font-size: 36px;
  line-height: 100px;
  display: inline-block;
  margin-left: 50px;
  margin-top: 50px;
  vertical-align: top;
}

.htmlversion .multi {
  width: 372px;
}

JavaScript

const htmlVersion = document.createElement('div');
htmlVersion.classList.add('htmlversion');
document.body.appendChild(htmlVersion);

const text = document.createElement('span');
text.textContent = "Basic text in HTML";
text.classList.add('single');
htmlVersion.appendChild(text);

const multiText = document.createElement('span');
multiText.textContent = "Basic text in HTML with more liness";
multiText.classList.add('multi');
htmlVersion.appendChild(multiText);


const app = new PIXI.Application({
	backgroundColor: 0xff0000,
  height: 300,
  width: 800
});
document.body.appendChild(app.view);

const graphics = new PIXI.Graphics()
	.beginFill(0xFFFFFF)
	.drawRect(50, 50, 302, 100)
	.drawRect(402, 50, 372, 200);

app.stage.addChild(graphics);

const basicText = new PIXI.Text('Basic text in PIXI');
basicText.style = new PIXI.TextStyle({
    fontFamily: 'Arial',
    fontSize: '36px',
    lineHeight: 50,
    fill: '#000000',
    wordWrap: true,
    wordWrapWidth: 440,
    lineJoin: 'round'
});
basicText.x = 50;
basicText.y = 50;
app.stage.addChild(basicText);

const compText = new PIXI.Text('Basic text in PIXI with more lines');
compText.style = new PIXI.TextStyle({
    fontFamily: 'Arial',
    fontSize: '36px',
    lineHeight: 100,
    fill: '#000000',
    wordWrap: true,
    wordWrapWidth: 372,
    lineJoin: 'round'
});
compText.x = 402;
compText.y = 50;
app.stage.addChild(compText);