我有以下html:
<td>
<div class="long-line">
<a>Some text</a>
</div>
</td>
和css:
.long-line {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
我有两种情况,我可以解决其中一种,但不能同时解决两种。
场景1)div不应该扩展到td之外,所有额外的文本都用省略号隔开。目前这是可行的。
场景2)如果不需要,div不应该填充td。换言之,如果有少量的文本,它不会占用任何不需要的额外空间。
我可以通过在类中添加display:inline块来解决场景2,但是一旦我这样做了,它就会溢出td来破坏场景1。此外,我还尝试向表单元格中添加文本溢出:省略号,但它不会执行任何操作。
是否有方法防止内联块元素从其容器中展开?
我应该试试别的方法吗?
最佳答案
Live demo
HTML。
<table>
<tr>
<td>
<div class="td">
<div class="wrapper">
hello world!
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="td">
<div class="wrapper">
hello world! hello world!
</div>
</div>
</td>
</tr>
</table>
CSS
.wrapper {
display: inline;
background-color: red;
}
.td {
width: 100px;
background-color: green;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
关于html - 防止内联块元素扩展到容器外部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31844988/