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

问题描述

这是我的代码:

<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;}

但是，它似乎不适用于我所拥有的内容，只是正常溢出.谁能告诉我我要去哪里错了?

However it doesn't seem to work on the content I have, and just overflows as normal. Can anyone tell me where I am going wrong please?

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

推荐答案

您必须将 text-overflow:省略号应用于 .item ，再加上 text-overflow:省略号不能单独应用.

You must apply text-overflow:ellipsis to .item , plus text-overflow:ellipsis can't be applied alone.

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

This CSS property doesn't force an overflow to occur; to do so and make text-overflow to be applied, the author must apply some additional properties on the element, like setting overflow to hidden.

更多信息

.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>

.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>

.title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  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>

这篇关于CSS文本溢出省略号不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！