我的CSS:
#content_right_head span
{
display:inline-block;
width:180px;
overflow:hidden !important;
}
现在它显示内容内容
但是我想展示 内容内容…
我需要在内容后面显示点。内容动态地来自数据库。
当前回答
非常感谢@sandeep的回答。
我的问题是，我想显示/隐藏文本的跨度与鼠标点击。因此，默认情况下，短文本与点显示，并通过点击长文本出现。再次单击会隐藏长文本并再次显示短文本。
非常简单的事情:只需添加/删除类text-overflow:ellipsis。
HTML:
<span class="spanShortText cursorPointer" onclick="fInventoryShippingReceiving.ShowHideTextOnSpan(this);">Some really long description here</span>
CSS(和@sandeep加。cursorpointer一样)
.spanShortText {
display: inline-block;
width: 100px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
.cursorPointer {
cursor: pointer;
}
JQuery部分-基本上只是删除/添加类cSpanShortText。
function ShowHideTextOnSpan(element) {
var cSpanShortText = 'spanShortText';
var $el = $(element);
if ($el.hasClass(cSpanShortText)) {
$el.removeClass(cSpanShortText)
} else {
$el.addClass(cSpanShortText);
}
}
其他回答
为此，您可以使用text-overflow: ellipsis;财产。像这样写
跨度{ 显示:inline-block; 宽度:180 px; 空白:nowrap;} 溢出:隐藏!重要; 文本溢出:省略; } Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿了一大堆铅字，把它们胡乱拼凑成一本铅字样本书</span>
JSFiddle
我认为你正在寻找文本溢出:省略与空白:nowrap结合
点击这里查看更多细节
首先，你做一个div标签设置宽度，在里面做p标签，然后添加文本，并应用下面给出的代码。 当你的p标签达到div标签的宽度时，“…”将被应用。
-
列表项
`div > p{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;}`
你可以试试这个:
.classname { 宽度:250 px; 溢出:隐藏; 文本溢出:省略; ｝
好吧，“文本溢出:省略号”为我工作，但只是如果我的限制是基于'宽度'，我需要一个解决方案，可以应用于行(在'高度'而不是'宽度')，所以我做了这个脚本:
function listLimit (elm, line){
var maxHeight = parseInt(elm.css('line-Height'))*line;
while(elm.height() > maxHeight){
var text = elm.text();
elm.text(text.substring(0,text.length-10)).text(elm.text()+'...');
}
}
当我必须，例如，我的h3只有2行，我做:
$('h3').each(function(){
listLimit ($(this), 2)
})
我不知道这是否是性能需求的最佳实践，但对我来说是有效的。
