1

Question

我有一个要求，我必须在哪里显示两行＆amp;添加...如果它溢出我的div宽度是固定的。（甚至高度也可以认为是固定的。）

实际文字如下所示：

1

Lorem Ipsum简直就是这样印刷的虚拟文本
和排版行业。

2

Lorem Ipsum只是文字
印刷和类型
行业。

预期：

1

Lorem Ipsum简直就是这样印刷品的虚拟文本...

2

Lorem Ipsum只是文字
印刷和典型...

我不想用插件重载（三点jquery插件就是这样）。

我打算通过剪切（拆分）字符串来实现，因为div宽度是固定的。

先谢谢。

Answer 1

更新：text-overflow看起来只对水平截断有用。

这是一个应该有效的小jQuery。

试一试： http://jsfiddle.net/UfxYQ/

var $container = $('#container');
var $text = $('#text');
var originalText = $text.text();
var temp = originalText;

if( $container.outerHeight() < $text.outerHeight() ) {

    while($container.outerHeight() < $text.outerHeight()) {
        $text.text( temp = temp.substr(0, temp.length-1) );
    }
    $text.text( temp = temp.substr(0, temp.length-3) );
    $text.append('...');
}

HTML

<div id='container'>
    <span id='text'>Lorem Ipsum is simply
        dummy text of the printing
        and typesetting industry.
    </span>
</div>

CSS

#container {
    width: 150px;
    height: 50px;
    line-height: 25px;
    position: relative;
}

~~您将无法获得完整的跨浏览器支持，但关闭。 IE6 +，Safari，Konqueror和Opera（具有Opera特定属性）支持一个名为text-overflow的CSS属性。~~

#myOverflowDiv { text-overflow: ellipsis; -o-text-overflow: ellipsis; }

http://www.quirksmode.org/css/textoverflow.html

~~http://www.quirksmode.org/css/contents.html#t413~~

Answer 2

CSS文本溢出属性是最好的方式，但尚未得到所有浏览器的支持。如果您想使用Javascript，可以创建一个屏幕外元素。使用CSS（由脚本生成）为其提供与目标相同的宽度和字体，高度为“2em”（即2行）。运行一个循环，一次一个字母地将文本添加到其中，直到您用完字母或高度变化。当高度增加时，你知道你已超过两行。

当然，您还需要考虑“...”的宽度，因此您可以将其附加到您要添加的字母上。

确保元素在屏幕外而不是使用“display：none”，因为非显示元素没有高度。 “可见性：隐藏”可能起作用;我没试过。

Answer 3

仅为user113716的帖子添加。更清洁的做法：

var $container = $('#container');
var $text = $('#text');
var temp = $text.text();

if ($container.height() < $text.outerHeight()) {
  while($container.height() < $text.outerHeight()) {
    temp = temp.substr(0, temp.length-1)
    $text.text(temp + '...');
  }
}

http://jsfiddle.net/YR7F2/

Answer 4

由于溢出省略号css不适用于多行文本，因此必须使用JavaScript。您可以复制文本框，将其置于顶部-1000000px的绝对位置，并剪切文本的最后一个字母，直到该框具有正确的高度。或者你在特定字母数量后进行简单切割，这样会更快但不准确。

Answer 5

一个简洁的方法是使用一个小jQuery插件...

$.fn.trimToParentHeight = function(options) {
    options = $.extend($.fn.trimToParentHeight.defaults, options);

    return this.each(function(index, text) {
        text = $(text);
        var height = parseInt(text.parent().height());
        var temp = text.text();
        while(parseInt(text.outerHeight()) > height && temp.length>0) {
            temp = temp.substr(0, temp.length-1)
            text.text(temp +  options.ellipsis);
        }
    });
}

$.fn.trimToParentHeight.defaults = {
    ellipsis: '...'
};

然后你就可以......

$(".container .text").trimToParentHeight()

...只要容器是文本的直接父级。

Answer 6

string="test/firstpage/secondpage/thirdpage";

string.split("/").slice(0, 1);

输出将是：测试

如何在javascript中剪切字符串，使其恰好适合两行＆amp;最后加......

1

2

1

2

6 个答案: