Css文本溢出省略号不起作用

Question

这是我的代码：

<ul class="results">
   <li class="item"> <span class="title"><a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property</a></span><span class="place">Place</span>
   </li>
   <li class="item"> <span class="title"><a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property</a></span><span class="place">Place</span>
   </li>
</ul>

我正在使用css：

.results  {text-overflow: ellipsis;}

然而，它似乎对我的内容不起作用，只是正常溢出。谁能告诉我哪里出错了？

http://jsfiddle.net/m6krvapf/3/

Answer 1

您必须将text-overflow:ellipsis应用于.item，而text-overflow:ellipsis不能单独应用。

  

此属性仅影响溢出块的内容   容器元素在其内联进展方向（不是文本   例如，在盒子的底部溢出。文字可能会溢出   当它被阻止包裹时（例如，由于'white-space:nowrap'）   或者单个词太长而不适合。

     

此CSS属性不会强制发生溢出;这样做   要使文本溢出应用，作者必须应用一些   元素的其他属性，例如将overflow设置为hidden。

More info

所以这是下面的一个片段

.item {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

<ul class="results">
  <li class="item">
    <span class="title">
      <a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property </a>
    </span>
    <span class="place">Place</span>
  </li>
  <li class="item">
    <span class="title">
      <a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property</a>
    </span>
    <span class="place">Place</span>
  </li>
</ul>

如果需要，您可以width添加.item，如下所示

.item {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 150px
}

<ul class="results">
  <li class="item">
    <span class="title">
      <a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property </a>
    </span>
    <span class="place">Place</span>
  </li>
  <li class="item">
    <span class="title">
      <a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property</a>
    </span>
    <span class="place">Place</span>
  </li>
</ul>

我猜你希望你的班级.place始终显示，因此你需要将display:inline-block添加到.title（因为span的初始值为{{1} }}）

inline

.title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  width: 150px
}

Answer 2

这是代码。

.results .item  {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

<ul class="results">
   <li class="item"> <span class="title"><a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property</a></span><span class="place">Place</span>
   </li>
   <li class="item"> <span class="title"><a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property</a></span><span class="place">Place</span>
   </li>
</ul>