div+CSS设置一行内文字超过宽度不换行且不显示截

在网页设计中，经常会遇到文字内容过长超出容器宽度的问题。这时，我们往往不希望文字自动换行，而是希望在文字超出容器宽度时，能够以一种优雅的方式显示。今天我们就来一下如何通过CSS实现这一效果。

当我们遇到文字超过DIV或Table宽度的情况时，浏览器默认会让其自动换行。但如果我们想要阻止这种自动换行，可以采用CSS中的几个关键属性来实现。对于一般的文字截断，无论是内联还是块级元素，都可以采用以下样式：

```css

.text-overflow {

display: block; / 对于内联对象需要设置 /

width: 31em; / 设置容器宽度 /

word-break: keep-all; / 阻止单词被拆分到两行 /

white-space: nowrap; / 防止文本自动换行 /

overflow: hidden; / 隐藏超出容器宽度的内容 /

text-overflow: ellipsis; / 当文本溢出时显示省略号(...) /

}

```

```css

table {

}

td {

width: 100%; / 设置单元格宽度 /

word-break: keep-all; / 不换行 /

white-space: nowrap; / 不换行 /

overflow: hidden; / 内容超出宽度时隐藏超出部分的内容 /

text-overflow: ellipsis; / 当对象内文本溢出时显示省略标记(...) /

}

```

需要注意的是，以上的写法对于多行文本来说，只有第一行会起作用。这种方法在IE浏览器中会显示省略号(...)，而在其他浏览器中则会在文本超出指定宽度时隐藏内容。这是一种在网页设计中常见且实用的技巧，能够让我们的页面更加整洁、美观。如果你正在面临类似的问题，不妨尝试一下这种方法。