我试图在基于引导的模板中打断所有col
中非常长的单词(也有一些长的uuid(,但当我对所有列使用下面的样式时,它会打断所有内容(在示例中检查坏的打断(,即使是单词处的正常换行也能完美地工作(在示例中将检查预期的打断(。
有没有一种方法可以让我在任何可能的情况下使用正常断开,只有当它无法完成任务时才能恢复到break-all
?如果Javascript技巧不会对性能产生太大影响,那么它也是受欢迎的。
我希望normalbreaking适用于空格操作的普通文本,如果文本没有任何空格并溢出,则break-all
适用。我想知道这是否可能!
div {
white-space: -moz-pre-wrap;
/* Mozilla */
white-space: -hp-pre-wrap;
/* HP printers */
white-space: -o-pre-wrap;
/* Opera 7 */
white-space: -pre-wrap;
/* Opera 4-6 */
white-space: pre-wrap;
/* CSS 2.1 */
white-space: pre-line;
/* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word;
/* IE */
word-break: break-all;
}
.fifty {
width: 200px;
float: left;
border: 10px solid #e6e6e6;
margin: 1px;
font-size: 14px;
font-family: Verdana;
}
h6 {
clear: both;
margin:0;
}
<div class="fifty">aquickwhitefoxjumpsoverafrozendog</div>
<div class="fifty">A Quick White Fox Jumps Over A Frozen Dog</div>
<h6>Bad breaking at all places</h6>
<div class="fifty">StackOverflow is a privately held website, the flagship site of the StackExchangeNetwork, created in 2008 by Jeff-Atwood and Joel-Spolsky</div>
<h6>Expected breaking</h6>
<article class="fifty">StackOverflow is a privately held website, the flagship site of the StackExchangeNetwork, created in 2008 by Jeff-Atwood and Joel-Spolsky</article>
div {
/ These are technically the same, but use both /
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/ This is the dangerous one in WebKit, as it breaks things wherever /
word-break: break-all;
/ Instead use this non-standard one: /
word-break: break-word;
/ Adds a hyphen where the word breaks, if supported (No Blink) /
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
.fifty {
width: 200px;
float: left;
border: 10px solid #e6e6e6;
margin: 1px;
font-size: 14px;
font-family: Verdana;
}
h6 {
clear: both;
margin:0;
}
<div class="fifty">aquickwhitefoxjumpsoverafrozendog</div>
<div class="fifty">A Quick White Fox Jumps Over A Frozen Dog</div>
<h6>Bad breaking at all places</h6>
<div class="fifty">StackOverflow is a privately held website, the flagship site of the StackExchangeNetwork, created in 2008 by Jeff-Atwood and Joel-Spolsky</div>
<h6>Expected breaking</h6>
<article class="fifty">StackOverflow is a privately held website, the flagship site of the StackExchangeNetwork, created in 2008 by Jeff-Atwood and Joel-Spolsky</article>