Question

我试图在基于引导程序的模板中的所有break-all中打破很长的单词（一些很长的uuid），但是当我对所有列使用以下样式时，它会破坏所有内容（检查示例中的错误））即使这些地方都是正常的包装，但是单词的工作也很完美（请查看预期的例子）。

有没有办法可以在任何可能的情况下使用正常破解，只有当它无法解决问题时才会恢复为break-all？如果这不会影响性能，也欢迎使用Javascript技巧。

如果文本没有任何空格和溢出，我希望正常的中断可以用于空间操作的普通文本和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 class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Are you sure?</h4>
            </div>
            <div class="modal-body">
                warning
            </div>
        <div class="modal-footer ok-cancel">
           <button type="button" class="btn btn-primary" (click)="delete()" data-dismiss="modal">Delete</button>
            <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
            </div>
        </div>
    </div>

Answer 1

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>

如何将休息时间限制为只有长话？

1 个答案: