JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<div id="div1">
     <h1>Overflow</h1>

    <p>This <span class="underline">property</span> only affects content that is overflowing a <span class="italic">block container</span> element in its inline progression direction (not text overflowing at the bottom of a box, for example). Text can <span class="emphasized">overflow</span> when it is prevented from wrapping (e.g., due to ‘white-space:nowrap’) or a single word being too long to fit.</p>
     <h1>overflow</h1>

    <ul>
        <li>元素的寬度或字的長度超過容器的邊界</li>
        <li>overflow不適用cjk文字</li>
    </ul>
     <h1>word-wrap vs word-break</h1>
    <ul>
        <li>The W3 specification that talks about these seem to suggest that word-break: break-all is for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text, whereas word-wrap: break-word is the more general, non-CJK-aware, behaviour</li>
    </ul>
    <p>this is a very looooooooooooooooooooooooooooooooooooooooooong word.</p>
</div>

CSS

* {
    padding: 0;
    margin: 0;
    border: 0;
}
#div1 {
    width:200px;
    padding: 0.5em;
    border: 1px solid red;
}
#div1 p:first-of-type {
    color: navy;
    text-align: justify;
}
#div1 p:first-letter {
    color: red;
    font-size: 2em;
    font-weight: bolder;
    text-transform: capitalize;
}
.underline {
    text-decoration: underline;
    color: red;
}
.emphasized {
    font-weight: bold;
    border-bottom: 1px dashed black;
    color: red;
}
.italic {
    font-style: italic;
    color: red;
}
h1 {
    overflow:hidden;
    text-overflow:ellipsis;
}
#div1 p:nth-of-type(2) {
    color: purple;
}