如何让一个省略号在CSS中的文本上显示

我想要使用CSS在我的长文本上显示省略号。当文本不包含空格时，这似乎工作正常，所以不能被破坏（即包装单词），但是当它包含空格时，省略号不会出现。如何让一个省略号在CSS中的文本上显示

我的代码都是：

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
span { 
    width: 150px; 
    display: inline-block; 
    border: 1px dotted blue; 
    height: 1em; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    padding: 4px; 
}  
     </style> 
    </head> 
    <body> 
     <div> 
      <span> 
      This is some long text that I want to have an ellipsis on. 
      </span> 
     </div> 
     <div> 
      <span> 
      afejaklfjefklafjeklfjeklfjeklfejfklejfkfjeklfjeklfejfklaejfeklfejfklejfklfejfkl 
      </span> 
     </div> 
    <body> 
</html>

Here's my fiddle.

来源

2013-05-28 Craig Shearer

如果添加white-space:nowrap省略号将进入画面。原因是你的文字和空格将会在空格的情况下换行，并且不需要省略号。如果您移除overflow-hidden并且文本将显示为包装，您可以看到它在运作。

span { 
    width: 150px; 
    display: inline-block; 
    border: 1px dotted blue; 
    height: 1em; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    padding: 4px; 
    white-space: nowrap; 
}

从doc

文本溢出声明允许你处理裁剪文字：即，不适合其框中的文本。文本溢出仅在以下情况下才起作用：该框的溢出不是可见的（溢出：可见文本只是从框中流出）该框具有空白：nowrap或类似的方法来约束文本是布局。（没有这个，文字会换行）

来源

2013-05-28 01:52:11 PSL

非常好 - 谢谢:) –

@CraigShearer不客气。 :) – PSL

如何让一个省略号在CSS中的文本上显示

回答

相关问题