css wordwrap,它是如何工作的？

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>

Answer 1

使用 overflow-wrap: break-word;

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

<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>

希望这是你正在寻找的.