我想破坏我的文字。
实际上我用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/