[英]How to cut the string in javascript so that it fits exactly two lines & add … at the end
I have a requirement where in i have to display the text for two lines & add ... if its overflowing My div Width is fixed.(Even height can be considered as fixed). 我有一个要求,我必须显示两行的文本并添加...如果它溢出我的div宽度是固定的。(甚至高度可以被视为固定)。
Actual text looks like this: 实际文本如下所示:
Lorem Ipsum is simply Lorem Ipsum很简单
dummy text of the printing 印刷的虚拟文本
and typesetting industry. 和排版行业。
Lorem Ipsum is simply text Lorem Ipsum只是文字
of the printing and types 印刷和类型
industry. 行业。
Expected: 预期:
Lorem Ipsum is simply Lorem Ipsum很简单
dummy text of the print... 印刷品的虚拟文字......
Lorem Ipsum is simply text Lorem Ipsum只是文字
of the printing and typ... 印刷和典型...
I do not want to overload with plugins(three dots jquery plugin does that). 我不想用插件重载(三点jquery插件就是这样)。
I'm planning to do just by cutting(split) the string as div width is fixed. 我打算只修剪(拆分)字符串,因为div宽度是固定的。
Thanks in Advance. 提前致谢。
UPDATE: Looks like text-overflow
is only useful for horizontal truncation. 更新:看起来text-overflow
仅对水平截断有用。
Here's a little jQuery that should work. 这是一个应该工作的小jQuery。
Try it out: http://jsfiddle.net/UfxYQ/ 尝试一下: 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 HTML
<div id='container'>
<span id='text'>Lorem Ipsum is simply
dummy text of the printing
and typesetting industry.
</span>
</div>
CSS CSS
#container {
width: 150px;
height: 50px;
line-height: 25px;
position: relative;
}
You won't have full cross browser support, but close. 您将无法获得完整的跨浏览器支持,但请关闭。 There's a CSS property called text-overflow
that is supported in IE6+, Safari, Konqueror, and Opera (with an Opera specific property).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/textoverflow.html
http://www.quirksmode.org/css/contents.html#t413 http://www.quirksmode.org/css/contents.html#t413
The CSS text-overflow property is the nicest way, but it's not supported by all browsers yet. CSS文本溢出属性是最好的方式,但尚未得到所有浏览器的支持。 If you want to use Javascript, you could create an offscreen element. 如果您想使用Javascript,可以创建一个屏幕外元素。 Use CSS (generated by the script) to give it the same width and font as your target, with a height of '2em' (ie 2 lines). 使用CSS(由脚本生成)为其提供与目标相同的宽度和字体,高度为“2em”(即2行)。 Run a loop, adding the text into it one letter at a time, until either you run out of letters or the height changes. 运行一个循环,一次一个字母地将文本添加到其中,直到您用完字母或高度变化。 When the height increases you know you've exceeded two lines. 当高度增加时,你知道你超过了两条线。
Of course you need to account for the width of the "..." as well, so you might append it to the letter you're about to add. 当然,您还需要考虑“...”的宽度,因此您可以将其附加到您要添加的字母中。
Be sure the element is offscreen rather than using "display: none", as non-displayed elements have no height. 确保元素在屏幕外而不是使用“display:none”,因为非显示元素没有高度。 "visibility: hidden" might work; “可见性:隐藏”可能起作用; I haven't tried. 我没试过。
Just an addition for post of user113716. 只是用户113716的帖子的补充。 Cleaner approach of doing this: 更清洁的做法:
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 + '...');
}
}
A neat way to do it would be with a little jQuery plugin... 一个简洁的方法是使用一个小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: '...'
};
Then you can just do... 那你就可以......
$(".container .text").trimToParentHeight()
... as long as the container is the direct parent of the text. ...只要容器是文本的直接父级。
string="test/firstpage/secondpage/thirdpage";
string.split("/").slice(0, 1);
Out put will be : test 出局将是:测试
As the overflow ellipsis css doesn't work for multiline text you have to do it with JavaScript. 由于溢出省略号css不适用于多行文本,因此必须使用JavaScript。 You could copy the text box, position it absolute with top -1000000px and cut the last letter of the text until the box has the right height. 您可以复制文本框,将其置于顶部-1000000px的绝对位置,并剪切文本的最后一个字母,直到该框具有正确的高度。 Or you simple cut after a specific letter count this will be faster but not accurate. 或者你在特定的字母数量后简单切割这将更快但不准确。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.