Html 如何在隐藏溢出的跨度中显示点（“...”）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11426275/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I show dots ("...") in a span with hidden overflow?
提问by Prashobh
My CSS:
我的CSS：
#content_right_head span
{
display:inline-block;
width:180px;
overflow:hidden !important;
}
Now it's showing content content
现在它正在显示内容内容
But I want to show like content content ...
但我想显示喜欢的 内容...
I need to show dots after contents. Contents are coming dynamically from database.
我需要在内容后显示点。内容来自数据库动态。
回答by sandeep
For this you can use text-overflow: ellipsis;property. Write like this
为此，您可以使用text-overflow: ellipsis;属性。像这样写
span {
display: inline-block;
width: 180px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>回答by kiranvj
If you are using text-overflow:ellipsis, the browser will show the contents whatever possible within that container. But if you want to specifiy the number of letters before the dots or strip some contents and add dots, you can use the below function.
如果您使用 text-overflow:ellipsis，浏览器将显示该容器内可能的内容。但是如果你想在点之前指定字母的数量或剥离一些内容并添加点，你可以使用下面的函数。
function add3Dots(string, limit)
{
var dots = "...";
if(string.length > limit)
{
// you can also use substr instead of substring
string = string.substring(0,limit) + dots;
}
return string;
}
call like
呼叫喜欢
add3Dots("Hello World",9);
outputs
产出
Hello Wor...
See it in action here
在这里看到它的行动
function add3Dots(string, limit)
{
var dots = "...";
if(string.length > limit)
{
// you can also use substr instead of substring
string = string.substring(0,limit) + dots;
}
return string;
}
console.log(add3Dots("Hello, how are you doing today?", 10));回答by Ando
回答by Chamika Sandamal
Try this,
尝试这个，
.truncate {
display:inline-block;
width:180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
add .truncateclass to your element.
将.truncate类添加到您的元素。
EDIT,
编辑，
Above solution is not working in all the browsers. you can try following jQuery plugin with cross browser support.
上述解决方案不适用于所有浏览器。您可以尝试使用具有跨浏览器支持的 jQuery 插件。
(function ($) {
$.fn.ellipsis = function () {
return this.eachAsync({
delay: 100,
bulk: 0,
loop: function (index) {
var el = $(this);
if (el.data("fullText") !== undefined) {
el.html(el.data("fullText"));
} else {
el.data("fullText", el.html());
}
if (el.css("overflow") == "hidden") {
var text = el.html();
var t = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width('auto')
.height(el.height())
;
el.after(t);
function width() { return t.width() > el.width(); };
var func = width;
while (text.length > 0 && width()) {
text = text.substr(0, text.length - text.length * 25 / 100);
t.html(text + "...");
}
el.html(t.html());
t.remove();
}
}
});
};
})(jQuery);
how to call,
怎么打电话，
$("#content_right_head span").ellipsis();
回答by Luís Gustavo Batista
Well, the "text-overflow: ellipsis" worked for me, but just if my limit was based on 'width', I has needed a solution that can be applied on lines ( on the'height' instead the 'width' ) so I did this script:
好吧，“文本溢出：省略号”对我有用，但是如果我的限制基于“宽度”，我需要一个可以应用于行（在“高度”而不是“宽度”上）的解决方案我做了这个脚本：
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()+'...');
}
}
And when I must, for example, that my h3 has only 2 lines I do :
例如，当我必须确保我的 h3 只有 2 行时，我会这样做：
$('h3').each(function(){
listLimit ($(this), 2)
})
I dunno if that was the best practice for performance needs, but worked for me.
我不知道这是否是性能需求的最佳实践，但对我有用。
回答by Kanu Sharma
You can try this:
你可以试试这个：
.classname{
width:250px;
overflow:hidden;
text-overflow:ellipsis;
}回答by Lina
var tooLong = document.getElementById("longText").value;
if (tooLong.length() > 18){
$('#longText').css('text-overflow', 'ellipsis');
}
回答by FrenkyB
Thanks a lot @sandeep for his answer.
非常感谢@sandeep 的回答。
My problem was that I want to show / hide text on span with mouse click. So by default short text with dots is shown and by clicking long text appears. Clicking again hides that long text and shows short one again.
我的问题是我想通过鼠标单击在跨度上显示/隐藏文本。所以默认情况下会显示带点的短文本，点击长文本就会出现。再次单击会隐藏该长文本并再次显示短文本。
Quite easy thing to do: just add / remove class with text-overflow:ellipsis.
很容易做的事情：只需添加/删除带有 text-overflow:ellipsis 的类。
HTML:
HTML：
<span class="spanShortText cursorPointer" onclick="fInventoryShippingReceiving.ShowHideTextOnSpan(this);">Some really long description here</span>
CSS (same as @sandeep with .cursorPointer added)
CSS（与添加 .cursorPointer 的 @sandeep 相同）
.spanShortText {
display: inline-block;
width: 100px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
.cursorPointer {
cursor: pointer;
}
JQuery part - basically just removes / adds class cSpanShortText.
JQuery 部分 - 基本上只是删除/添加类 cSpanShortText。
function ShowHideTextOnSpan(element) {
var cSpanShortText = 'spanShortText';
var $el = $(element);
if ($el.hasClass(cSpanShortText)) {
$el.removeClass(cSpanShortText)
} else {
$el.addClass(cSpanShortText);
}
}
