CSS文本溢出省略号不起作用 [英] Css text overflow ellipsis not working

问题描述

这是我的代码:

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

此属性仅影响溢出块的内容容器元素的内联进度(不是文本)例如，在框的底部溢出).文字可能会溢出当它被禁止包装时(例如，由于" white-space:nowrap ")或一个单词太长而无法容纳.

This property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example). Text can overflow when it is prevented from wrapping (e.g., due to ‘white-space:nowrap’) or a single word being too long to fit.

此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文本溢出省略号不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！