回答:
これを試して:
div {
width: 200px;
word-wrap: break-word;
}
word-break: break-all;
に通常のテキストで使用すると、単語が途中で壊れます。これは醜いです...両方の動作を混在させることはできませんか?
word-break: break-all
ありませんword-wrap: break-all
。簡単に間違える
ブートストラップ3では、空白が「nowrap」に設定されていないことを確認してください。
div {
width: 200px;
word-break: break-all;
white-space: normal;
}
white-space: normal;
うまくいく前に、私も必要でした。
次のようなソフトハイフンを使用できます。
aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa
これは次のように表示されます
aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa
収容ボックスが十分に大きくない場合、または
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
もしそれが。
­
ですか?
aaaaaa...aaaaa
しても大丈夫a­a­a­a­a­a­a...a­a­a­a
ですか?
div {
// set a width
word-wrap: break-word
}
' word-wrap
'ソリューションはIEとサポートするブラウザでのみ機能しますCSS3
。
最良のクロスブラウザーソリューションは、サーバー側の言語(phpなど)を使用して長い文字列を検索し、定期的にHTMLエンティティに配置することです。​
このエンティティは、長い単語を適切に分割し、すべてのブラウザーで機能します。
例えば
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
このCSSを段落に追加します。
style="width:420px;
min-height:15px;
height:auto!important;
color:#666; padding: 1%;
font-size: 14px;
font-weight: normal;
word-wrap: break-word;
text-align: left"
text-overflow:ellipsis
は次の人と同じくらい好きですが、この質問に対する正しい答えではありません。彼は、オーバーフローを切り捨てないで、ワードラップを検討しています。
これを試して
div{
display: block;
display: -webkit-box;
height: 20px;
margin: 3px auto;
font-size: 14px;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
プロパティtext-overflow:ellipsis add ...およびline-clampは、行数を示します。
HTML本文で試してください:
<table>
<tr>
<td>
<div style="word-wrap: break-word; width: 800px">
Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
</div>
</td>
</tr>
</table>
CSS本体で試してください:
background-size: auto;
table-layout: fixed;
ブートストラップを使用しました。私のHTMLコードは次のようになります。
<div class="container mt-3" style="width: 100%;">
<div class="row">
<div class="col-sm-12 wrap-text">
<h6>
text content
</h6>
</div>
</div>
</div>
CSS
.wrap-text {
text-align:justify;
}
text-justify
クラスがあるので、代わりに使用できます.wrap-text