有一个功能可以根据需要的行数剪切文本,并在末尾添加三点。如果将大小调整为小型设备,则一切正常,如果为大型设备,则一切正常-不返回调整大小期间隐藏的文本。如何解决此错误?
function ellipsis() {
var $this = $('.i-ellips'),
isOverflow = $this.css('overflow') === 'hidden';
if (isOverflow) {
var text = $this.text(),
lh = parseInt($this.css('line-height')),
line = $this.attr('data-ellipsis'),
maxHeight = lh * line;
for (var i = text.length; i > 0; i--) {
if ($this.height() <= maxHeight) {
break;
} else {
$this.text(text.substr(0, i) + '...');
}
}
}
};
ellipsis();
$(window).on('resize', ellipsis);
答案 0 :(得分:0)
那是因为您要获取文本并替换它。下次您去那里时,文字和您以前离开的一样,不是原始的。因此,您可以删除文本,但不能添加已删除的文本。
无论如何,您只能使用CSS来做您想做的事情。
答案 1 :(得分:0)
当您缩小尺寸时,我看到它正在工作。所以,我想说这是因为您在调整大小时正在使用已经缩短的文本,因此没有原始文本可返回。
如果适用,解决方案可能是将原始文本存储在类似的位置。
<div data-original-text="original text that will be used every time for rendering..">trimmed text...</div>
答案 2 :(得分:0)
您在以下行中剪切了文字
$this.text(text.substr(0, i) + '...');
但是您不会保留原始文本,因此放大时无法显示原始文本。
(此外,最好参考在线示例,例如通过jsfiddle或类似的方法来问这类问题)
答案 3 :(得分:0)
存储完整文本,然后在脚本代码文件的开头对其进行任何操作。
var full_text=$('.i-ellips').text();
然后在调整大小事件中将其值分配给名为text的本地变量
var text=full_text;
并在执行任何操作之前将full_text分配给html元素的文本。
$this.text(full_text)
答案 4 :(得分:0)
能否请您检查此解决方案?
body {
margin: 0;
padding: 50px;
font: 400 14px/1.2em sans-serif;
background: white;
}
/* styles for '...' */
.block-with-text {
/* hide text if it more than N lines */
overflow: hidden;
/* for set '...' in absolute position */
position: relative;
/* use this value to count block height */
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 3.6em;
/* fix problem when last visible word doesn't adjoin right side */
text-align: justify;
/* */
margin-right: -1em;
padding-right: 1em;
}
.block-with-text:before {
/* points in the end */
content: '...';
/* absolute position */
position: absolute;
/* set position to right bottom corner of block */
right: 0;
bottom: 0;
}
.block-with-text:after {
/* points in the end */
content: '';
/* absolute position */
position: absolute;
/* set position to right bottom corner of text */
right: 0;
width: 1em;
/* set width and height */
height: 1em;
margin-top: 0.2em;
background: white;
}
<p class="block-with-text">The Hitch Hiker's Guide to the Galaxy has a few things to say on the subject of towels. <br>
A towel, it says, is about the most massively useful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon; use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal (a mindboggingly stupid animal, it assumes that if you can't see it, it can't see you - daft as a bush, but very ravenous); you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: non-hitch hiker) discovers that a hitch hiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, face flannel, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitch hiker any of these or a dozen other items that the hitch hiker might accidentally have "lost". What the strag will think is that any man who can hitch the length and breadth of the galaxy, rough it, slum it, struggle against terrible odds, win through, and still knows where his towel is is clearly a man to be reckoned with.</p>