css省略号不起作用答案

【问题标题】：css ellipsis not workingcss省略号不起作用
【发布时间】：2016-04-22 07:56:06
【问题描述】：

我在下面的 css 中使用了省略号，但没有出现点，谁能告诉我我的 css 有什么问题。

提前致谢

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

【问题讨论】：

文本溢出不能垂直工作，这是你的问题吗？
你的代码没有错。我认为类调用是错误的。

标签： html css ellipsis

【解决方案1】：

你的代码没问题，在这个FIDDLE试试吧

问题是你有一个拼写错误.message-suject，而在你的 html 中显然是 .message-subject 和 b 应该是这样的

【讨论】：

【解决方案2】：

更改 CSS ：

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

【讨论】：

【解决方案3】：

如果你的 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/

【讨论】：

【解决方案4】：

请试试这个... 您需要提及文本容器的固定宽度，这样如果文本超过该宽度，则...会出现：

HTML：

<ul class="inbox-message-list">
<li class="message-suject">
  This is some long text that will not fit in the box

</li>
</ul>

CSS：

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

FIDDLE

【讨论】：