5

假设我有两个盒子：div.box和textarea.box，每个盒子都有相同的固定宽度和高度。每个都有相同的文本，包括一个 verrrryyyyy 长词，然后是一系列短词。

设置可能如下所示：

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>


使用上面的代码，div不会打断长字，然后从下一行开始用一系列短字：

div.box 图像

但是，textarea打破了长字：

textarea.box 图片

我的问题：为什么会发生这种情况？什么默认 CSS 导致将div长单词保留在一行（即不中断单词），但是textarea中断它？

JS 小提琴示例。

4

3 回答 3

6

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;
}

这word-wrap: break-word;就是原因。

该overflow属性只能隐藏溢出的内容或允许滚动。用来word-wrap: break-word;让长词被打断。

于 2013-02-12T21:12:14.787 回答
3

不同之处在于每个元素的word-wrap属性的默认值。

默认情况下，浏览器的原生样式表应用于word-wrap:normal元素div，而textarea它应用于元素word-wrap:break-word。

换句话说，对于div元素，浏览器假设如果文本超出指定的尺寸，整个单词不能被打破以适应容器，而对于textarea元素，它假设单词中断是可以接受的。当（在这种情况下）溢出未被抑制时，这种差异变得非常明显。

于 2013-02-12T21:30:31.827 回答
1

因为这不是溢出的作用，所以您可能想看看 word-wrap 属性（http://www.w3.org/TR/css3-text/#overflow-wrap）。

你想应用自动换行：break-word; 到元素。

于 2013-02-12T21:10:55.027 回答