JSFiddle - React, Tailwind, and code Playground

by kanonji

HTML

<h1>Example of how `word-wrap: break-word` prevents `overflow-x: auto(scroll)`</h1>

<h2 class="good">[Good] overflow-x: auto;</h2>
<div class="overflow_auto">
acbdefghijklmnopqrstuvwxyzacbdefghijklmnopqrstuvwxyzacbdefghijklmnopqrstuvwxyz
</div>

<h2 class="bad">[Bad] word-wrap: break-word; overflow-x: auto;</h2>
<div class="word-wrap_break-word overflow_auto">
acbdefghijklmnopqrstuvwxyzacbdefghijklmnopqrstuvwxyzacbdefghijklmnopqrstuvwxyz
</div>

<h2>[Example] word-wrap: break-word;</h2>
<div class="word-wrap_break-word">
acbdefghijklmnopqrstuvwxyzacbdefghijklmnopqrstuvwxyzacbdefghijklmnopqrstuvwxyz
</div>

<h2>[Example] No any styles</h2>
<div>
acbdefghijklmnopqrstuvwxyzacbdefghijklmnopqrstuvwxyzacbdefghijklmnopqrstuvwxyz
</div>

CSS

.word-wrap_break-word{
    word-wrap: break-word;
}
.overflow_auto{
    overflow-x: auto;
}

/***/

div{
    background: #333;
    color: #ccc;
    margin-bottom: 1em;
}
h1{
    font-size: 1.1rem;
}
h2{
    font-size: .8rem;
    margin: 0;
    color: #555;
}
.good{
    color: #393;
}
.bad{
    color: #933;
}