我如何能显示点(" ")在一个跨度与隐藏溢出?

为此，你可以使用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>

JSFiddle

我认为你正在寻找text-overflow: ellipsis结合white-space: nowrap

查看更多细节在这里

试试这个,

.truncate {
display:inline-block;
width:180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

将.truncate类添加到元素中。

编辑,

上述解决方案并不是在所有浏览器中工作。你可以尝试使用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);

如何打电话，

$("#content_right_head span").ellipsis();

如果你使用的是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;
}

叫喜欢

add3Dots("Hello World",9);

输出

Hello Wor...

在这里看到它的行动

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));

好吧，“文本溢出:省略号”为我工作，但只是如果我的限制是基于'宽度'，我需要一个解决方案，可以应用于行(在'高度'而不是'宽度')，所以我做了这个脚本:

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)
})

我不知道这是否是性能需求的最佳实践，但对我来说是有效的。

你可以试试这个:

.classname{
width:250px;
overflow:hidden;
text-overflow:ellipsis;
}

非常感谢@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);
}
}

 var tooLong = document.getElementById("longText").value;
if (tooLong.length() > 18){
$('#longText').css('text-overflow', 'ellipsis');
}

text-overflow: ellipsis只工作，如果你显示1行。如果有更多，你可以使用display: -webkit-box属性，以防你想显示更多一行。代码如下2行。

line-height: 1.6rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 3.2rem;

-

列表项

`div > p{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;}`

如果你正在使用ES6，它可以用三元操作符和模板字面量来创建

function add3Dots(text, limit)
{
return text.length > limit ? `${text.substring(0, limit)}...` : text;
}