在另一个div中用html溢出文本

时间:2013-10-10 08:38:22

标签: javascript html text overflow

我希望有一个文本在另一个div中溢出,所以我在Stackoverflow的另一个问题中找到并使用了this answer

问题是只显示纯文本;链接,粗体/斜体和段落被忽略。

以下是答案中的same jsfiddle,但添加了html标记。我如何展示它们?

代码:

var currentCol = $('.col:first');
var text = currentCol.text();
currentCol.text('');
var wordArray=text.split(' ');

$.fn.hasOverflow = function() {
   var div= document.getElementById( $(this).attr('id') ); 
   return div.scrollHeight>div.clientHeight;
};

for ( var x = 0; x < wordArray.length; x++ ) {
    var word = wordArray[x];
    currentCol.append(word+' ');
    if ( currentCol.hasOverflow() ) {
        currentCol = currentCol.next('.col');
    }
}

任何提示或建议将不胜感激:)

1 个答案:

答案 0 :(得分:0)

jQuery .text方法仅返回纯文本。请尝试使用.html 例如:

var text = currentCol.html();

如果您的代码包含任何空格(例如<span class="some-class">),那么代码中的以下行会对您的文字造成混乱

var wordArray=text.split(' ');

您可能想将其更改为

text = text.replace(/ (?![^<>]*>)/gi, '%^%');
var wordArray = text.split('%^%');

这是一种解决方法,因为你可以迭代每个正则表达式匹配并在每个空格字符上对其进行子串,但是恕我直言,上面的%^%组合的想法要简单得多。你可以用你想要的任何东西替换这3个标志。我只是觉得它很独特,不会用于任何其他目的 上面的正则表达式已简化,并假设您未在文本中使用<>符号 如果您真的这样做,我建议您使用&lt;&gt;替换它们。