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

我有以下html元素：如何正确使用文本溢出来格式化文本？

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

我想用jQuery插入标题<div id="title"></div>内，它应该看起来像这样：

下载“称号，是洙长很长很长...”为...

这个CSS /少：

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

，但它看起来是这样的：

下载 “

标题是洙长很长很长......

” 为...

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

来源

2013-08-16 boli

我认为你不会有这个问题，而不是使用'div'，即使用'span' ......你根本不需要特殊的CSS处理。 – Joum

你为什么要使用一个div而不是跨度？ –

@Joum：设置宽度怎么样？ – Itay

正确的方法是使用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>

来源

2013-08-16 07:56:59

为什么只有'span'当你以后使用display：inline-block？ –

@Mr_Green'span'元素默认为'inline'级别的元素，将它设置为'display-block'（对于'span'元素来说是Xbrowser），你可以使用'overflow：hidden;'什么不明确？你知道'inline-block'和'block'之间的区别吗？在'h2'（def：block-level）元素中使用'span'永远是正确的。 –

@Mr_Green也在语义上，如果他在'p'标签中使用这个，使用'div'将是不正确的，所以你应该使用'span'这样的东西 –

您使用的是text-overflow: ellipsis;，它适用于单行的情况，因此实际上不需要使用for...，它会使sentence...for...变得类似。另外div是块级元素，因此您将不得不使用display: inline-block;并为元素分配固定宽度。

Demo（感谢下面的评论，但我的工作就可以了..）

#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将是一个更好的元素去..

来源

2013-08-16 07:54:44

我认为你应该制作内嵌块并设置其宽度 – Itay

-1

使用white-space:nowrap;和overflow:hidden; #title

来源

2013-08-16 08:02:22 SangeethK

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

回答

相关问题