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

Question

我有以下 html 元素：

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

我想在其中插入一个带有 jquery 的标题，<div id="title"></div>它应该看起来像这样：

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

使用这个 css/less：

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

但它看起来是这样的：

下载 ”

标题好长好长好长……

“ 为了 ...

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

Answer 1

当你有一条线时，你正在使用text-overflow: ellipsis;which 工作，所以你不必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 */
}

另外，我想指出您正在使用id那里，并且 id 必须是唯一的，因此请确保您不要重复，最好使用类。同样出于这些目的，span将是一个更好的元素去......

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;