Why do text ads break long words (and why don't they break long words) when they go over the width?
Let's say I have two boxes: div.box
and textarea.box
, each with the same fixed width and height. Each of them also has identical text, including one inconsistent long word followed by a series of short words.
The setup might look like this:
CSS
.box {
width: 400px;
height: 100px;
}
HTML:
<div class="box">
looooooooooooooooooooooooooooooooooooooooooooooooooooooooong_word and short text
</div>
<br><br>
<textarea class="box">
looooooooooooooooooooooooooooooooooooooooooooooooooooooooong_word and short text
</textarea>
Using the above code wo div
n't break a long word, then start on the next line with a series of short words:
However, it textarea
breaks the long word:
My question is: Why is this happening? What is the default CSS that forces you div
to store a long word on one line (i.e. not break the word) but textarea
break it?
source to share
Default text style for Chrome:
textarea {
-webkit-appearance: textarea;
background-color: white;
border: 1px solid;
border-image: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
-webkit-box-orient: vertical;
resize: auto;
cursor: auto;
padding: 2px;
white-space: pre-wrap;
word-wrap: break-word;
}
Reason word-wrap: break-word;
.
The property overflow
can only hide overflowing content or allow scrolling. Use word-wrap: break-word;
to break down long words.
source to share
The difference lies in the default property value word-wrap
for each item.
By default, the browser's native style template is applied word-wrap:normal
to the element div
and textarea
applied to the element word-wrap:break-word
.
In other words, for elements, the div
browser assumes that if the text overflows the specified dimensions, whole words cannot be broken to fit the container, whereas for elements textarea
it assumes that word violation is acceptable. This difference becomes apparent when (as in this case) the overflow is not suppressed.
source to share
Since this is not what's happening with overflow, you might want to take a look at the word-wrap property ( http://www.w3.org/TR/css3-text/#overflow-wrap ).
You want to apply word-wrap: break-word; to the element.
source to share