5

2つのボックスがあるとしましょう：div.boxとtextarea.box、それぞれが同じ固定幅と高さを持っています。それぞれに、1つのverrryyyyyの長い単語と、それに続く一連の短い単語を含む同一のテキストがあります。

セットアップは次のようになります。

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、長い単語を1行に保持する（つまり、単語を壊さない）が、それ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 に答える