我想破坏我的文字。
实际上我用
word-break: break-all;
这样看起来不好。

我想尝试减少空格,只有在没有可能的情况下,才在任何字母后面进行削减。

<div class="name td" style="word-break: all;">
TestTestTestTestTestTestTestTestTestTestTestTestTe stTestTestTestTestTestTestTestTestTestTestTestTestTestTest
</div>

display: table-cell;
border: thin solid black;
padding: 5px;
height: 100%;
vertical-align: middle;
word-break: break-all;


如果可能的话,我想在空格后面打断,否则在任何字母后面打扰。有任何想法吗?

最佳答案

word-wrap: break-word;将为您解决此问题,但不能将现有标记与display: table-cell结合使用,因为table-cell随着内容的增长而增加。

因此,要使您的案例起作用,您需要在table-layout: fixed; width: 100%;上设置table,并添加一个div包装器,该包装器具有word-wrap: break-word;



.table {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.td {
  display: table-cell;
  border: thin solid black;
  padding: 5px;
  height: 100%;
  vertical-align: middle;
}
.td .wrapword {
  word-wrap: break-word;
}

<div class="table">
  <div class="name td">
    <div class="wrapword">
      TestTestTestTestTestTestTestTestTestTestTestTestTe stTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
    </div>
  </div>
</div>







根据评论进行了更新

如果水平增长很好,那么word-wrap: break-word;就足够了。



.td {
  display: table-cell;
  border: thin solid black;
  padding: 5px;
  height: 100%;
  vertical-align: middle;
  word-wrap: break-word;
}

<div class="table">
  <div class="name td">
      TestTestTestTestTestTestTestTestTestTestTestTestTe stTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
  </div>
</div>

关于html - CSS:连字符音节(如果不可能的话),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44324473/

10-12 00:17
查看更多