1

我会尽力解释自己,因为我真的不想复制所有代码(有很多)。我有一个跨度,它从 AngularJS 绑定中获取文本(对这个问题并不重要),我正在为这个跨度设置四个样式参数:

  • 宽度:100px
  • 空白:nowrap;
  • 溢出:隐藏;
  • 文本溢出:省略号;

我根据以下 W3Schools 页面执行此操作:http ://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

我希望将文本剪切为 100 像素,并在其末尾添加省略号。这是出现问题的屏幕截图:

Google Chrome 调试器为 span 的容器计算样式页面 Google Chrome 调试器为实际跨度计算的样式页面

4

1 回答 1

3

您不能将宽度应用于这样的内联元素。

例子:

HTML

<span>1</span>
<span class="blocked">2</span>

CSS

span
{
    border: 1px solid red;
    width: 300px;
}

span.blocked
{
    display: block;
}

JSFiddle

http://jsfiddle.net/sygap/

于 2013-07-23T16:43:06.853 回答