是否有自动换行或任何其他属性阻止文字换行?我有一个高度,overflow:hidden
,文字仍然断开。
需要在CSS3之前在所有浏览器中使用。
答案 0 :(得分:559)
div {
white-space: nowrap;
overflow: hidden;
}
<div>test that doesn't wrap</div>
注意:这仅适用于块元素。如果你需要对表格单元格执行此操作(例如),则需要在表格单元格中放置一个div,因为表格单元格具有显示表格单元格而不是阻止。
从CSS3开始,这也支持表格单元格。
答案 1 :(得分:48)
您可以使用CSS white-space Property
来实现此目标。
white-space: nowrap
答案 2 :(得分:24)
使用省略号会在最后添加....
<style type="text/css">
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
答案 3 :(得分:4)
有时使用
代替空格会有效。显然它有缺点。
答案 4 :(得分:1)
只需清楚一点,它就可以很好地与段落和标题等配合使用。您只需指定display: block
。
例如:
<h5 style="display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
This is a really long title, but it won't exceed the parent width
</h5>
(原谅内联样式)
答案 5 :(得分:0)
在JSX / React中,防止文字换行
instance.setHeaderItems(header => {
header.getHeader('toolbarGroup-Annotate').unshift({
type: 'customElement',
render: function() {
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.name = 'snap-to-grid';
checkbox.value = '1';
checkbox.id = 'snap-to-grid';
checkbox.onclick = function(evt) {
alert(instance.iframeWindow.document.getElementById('snap-to-grid').checked);
};
return checkbox;
}
});
});