CSS:连字符音节(如果不可能的话)

Question

我想破解我的短信。实际上，我使用的是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;

如果可能的话，我想在太空后休息，其他的在任何信件之后。有什么想法吗？

Answer 1

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>

​

Answer 2

尝试word-wrap:break-word，，当它达到外部包装宽度的末尾时，它就会中断。

<div class="name td" style="word-wrap: break-word;">
    TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
</div>