2016-04-22 49 views
0

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

由于提前

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

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

+0

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

回答

0

请试试这个... 您需要一提的固定宽度的文本容器,因此,如果文本超过了宽度,然后... ...将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

0

更改CSS:

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

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

1

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

的问题是你有一个错字.message-suject,并在你的HTML apperently是.message-subjectb像它应该是