如何正确使用文本溢出来格式化文本？

Question

我有以下html元素：

<h2>Download "<div id="title"></div>" for...</h2>

我想在<div id="title"></div>中插入带有jquery的标题，它应该是这样的：

  

下载“标题很长很长......”...

用这个css / less：

#title{
   overflow: hidden;
   text-overflow:ellipsis;
}

但看起来就是这样：

  

下载“

     

标题很长很长......

     

“for ...

我应该看到一行带有分割标题的文字，但我看到三行文字。如何强制将整个文本放在一行？谢谢！

Answer 1

您正在使用text-overflow: ellipsis;，当您使用单行时，for...无效，因此您不必实际使用sentence...for...，它会生成div之类的内容。另外display: inline-block;是块级元素，因此您必须使用#title{ overflow: hidden; text-overflow:ellipsis; display: inline-block; width: 100px; white-space: nowrap; vertical-align: bottom; /* This is important to align text right in the line */ } 并为元素指定固定宽度。

Demo（感谢下面的评论，虽然我正在研究它......）

id

另外，我想指出你在那里使用span，id必须是唯一的，所以只要确保你不重复，更好地使用一个类。同样出于这些目的，{{1}}将是一个更好的元素..

Answer 2

正确的方法是使用span元素，并设置为inline-block

http://jsbin.com/imutem/4/edit

#title{
   display:inline-block;
   vertical-align:bottom;
   overflow: hidden;
   width:200px;
   white-space: nowrap;
   text-overflow:ellipsis;
}

HTML：

<h2>Download "<span id="title"></span>" for...</h2>

Answer 3

在#title

中使用white-space:nowrap;和overflow:hidden;