Question

我有一张桌子需要在手机上看起来不难看，但在我的手机上，默认情况下第一个文字不会被分割，但space的文字会

有没有办法用CSS分割-或.small{ max-width: 10px; }未被截断的文字？

//我的意思

<div class="small">
<span>This Text gets split</span>
</div>
<div style="min-height: 15px"></div>
<div class="small">
<span>ThisWontGetSpilt</span>
</div>
<div style="min-height: 15px"></div>
<div class="small">
<span>This-Will-Get-Split-As-Well</span>
</div>

{{1}}

Answer 1

使用overflow-wrap: break-word;

＆＃13;

.small{
  max-width: 50px;
  overflow-wrap: break-word;
}

＆＃13;

<div class="small">
<span>This Text gets split</span>
</div>
<div style="min-height: 15px"></div>
<div class="small">
<span>ThisWontGetSpilt</span>
</div>
<div style="min-height: 15px"></div>
<div class="small">
<span>This-Will-Get-Split-As-Well</span>
</div>

＆＃13;

希望这就是你要找的东西。

Answer 2

您可以使用word-break: break-all;来达到此效果。

.container {
  background-color: grey;
  padding: 1rem;
  width: 100px;
  word-break: break-all;
}

<div class="container">
  <p>This is too long for the container, but get's broken properly with the word-break css property.</p>
</div>

css wordwrap，它是如何工作的？

2 个答案: