Question

我使用下面的css作为省略号，但是点数没有来，任何人都可以告诉我，我的CSS有什么问题。

先谢谢

.inbox-message-list li .message-suject{
    white-space: nowrap;
    width: 100%;
    overflow:hidden !important;
    text-overflow: ellipsis !important;
    display:block; 
}

Answer 1

您的代码没问题，请在此FIDDLE

中试用

问题是你有一个拼写错误.message-suject并且在你的html中显然是.message-subject并且b就像它应该是

Answer 2

请试试这个...... 你需要提到文本容器的固定宽度，这样如果文本超过那个宽度那么......将会出现：

HTML：

.inbox-message-list li.message-suject
{
  white-space: nowrap; 
  width:150px; 
  overflow:hidden !important; 
  text-overflow: ellipsis !important; 
  display:block;
}

CSS：

{{1}}

FIDDLE

Answer 3

更改CSS：

.inbox-message-list li.message-suject
{
 white-space: nowrap; 
 width:150px; 
 overflow:hidden !important; 
 text-overflow: ellipsis !important; 
 display:block; 
}

Answer 4

如果您的HTML是这样的，那么CSS规则正在运行

<ul class="inbox-message-list">
  <li>
    <div class="message-suject">
sdjkfhjksd fsjkfhskdhf ksdhfksdj fksdahfsdka fhsdkajf sdakfhksd afhsdk fksdhfksd fgsdk fksdhfksdhfkjshdf kshdfksd fkshad fksdhfkshdfkhsadkfhskdhfdsfsd
    </div>
  </li>
</ul>

https://jsfiddle.net/z1aey05k/

css省略号不起作用

4 个答案: