我想text-overflow在表格单元格中使用CSS ,这样如果文本太长而无法放在一行上,它将使用省略号剪辑而不是换行到多行.这可能吗?
我试过这个:
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Run Code Online (Sandbox Code Playgroud)
但white-space: nowrap似乎使文本(及其单元格)不断向右扩展,推动表格的总宽度超出其容器的宽度.但是,如果没有它,当文本到达单元格边缘时,文本将继续换行到多行.
我不知道为什么这个简单的CSS不起作用......
.app a {
height: 18px;
width: 140px;
padding: 0;
overflow: hidden;
position: relative;
margin: 0 5px 0 5px;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
color: #000;
}Run Code Online (Sandbox Code Playgroud)
<div class="app">
<a href="">Test Test Test Test Test Test</a>
</div>Run Code Online (Sandbox Code Playgroud)
应该在4号"测试"周围切断