HTML / CSS省略号（...）不工作答案

【问题标题】：HTML / CSS Ellipsis (...) Not WorkingHTML / CSS省略号（...）不工作
【发布时间】：2012-06-01 12:12:50
【问题描述】：

我正在尝试在我的网站上使用省略号。这是以下 HTML / CSS 代码，它似乎不起作用。

CSS：

.oneline {
text-overflow:ellipsis;
white-space: nowrap;
width: 50px;
overflow: hidden;
}

HTML：

<div class="oneline">Testing 123 Testing 456 Testing 789</div>

【问题讨论】：

您确定您使用的是兼容 CSS3 的浏览器吗？
如果您使用 FF，请查看此答案：stackoverflow.com/questions/4927257/…
我觉得不错jsfiddle.net/ZBQnL
在最新版本的 Chrome、FF 和 IE9 中运行良好
这甚至不需要兼容 CSS3 的浏览器 - 即使 IE6 也能正确呈现 white-space:nowrap 和 text-overflow:ellipsis。

标签： html css text overflow ellipsis

【解决方案1】：

基于initial post，我们都假设很明显，但以防万一...... ;)

<style type="text/css">
    .oneline {
        text-overflow : ellipsis;
        white-space   : nowrap;
        width         : 50px;
        overflow      : hidden;
    }
</style>
<div class="oneline">Testing 123 Testing 456 Testing 789</div>

http://jsfiddle.net/NawcT/

编辑：解决方案是设置段落与 div 的样式。

【讨论】：

在 jsfiddle.net 上似乎可以正常工作 - 我在单独的样式表中有样式。
你在使用多个样式表吗？也许您有一个重置器正在破坏您的 text-overflow 或 overflow 规则。您可以尝试在规则分配后添加!important 以测试该理论。

【解决方案2】：

将position:absolute 分配给要截断的元素可能会比float:left 产生更少的不良副作用。

这对我有用：

div {
  position: absolute;
  width: 70px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

【讨论】：