css省略号不起作用

问题描述：

我用下面的css表示省略号，但点不会出现任何人都可以告诉我在我的css中有什么问题。css省略号不起作用

由于提前

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

文本溢出不会垂直工作，可以说是你的问题？ –

你的代码没有错。我认为课堂呼叫是错误的。 – krishna

答

请试试这个... 您需要一提的固定宽度的文本容器，因此，如果文本超过了宽度，然后... ...将apear：

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

答

更改CSS：

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

答

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

答

你的代码是好的，尝试在这个FIDDLE

的问题是你有一个错字.message-suject，并在你的HTML apperently是.message-subject与b像它应该是

css省略号不起作用

相关推荐