CSS:如何阻止文本占用超过1行?

时间:2009-02-21 04:58:20

标签: html css text word-wrap

是否有自动换行或任何其他属性阻止文字换行?我有一个高度,overflow:hidden,文字仍然断开。

需要在CSS3之前在所有浏览器中使用。

6 个答案:

答案 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)

有时使用&nbsp;代替空格会有效。显然它有缺点。

答案 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;
      }
    });
  });