Question

我想打破我的文字。 Actualy我用 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

尝试自动换行：break-word ，当它到达外包装器宽度的末尾时会断开。

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

CSS：连字符音节，如果不可能打破单词

2 个答案: