javascript - 在文本之间添加br标签(第二行中的省略号)

在我的项目中，我试图在<br>元素内添加一个div元素。因此，我可以在第二行显示省略号。

这是fiddle，在其中我对br标记进行了硬编码。

<div>hellohel<br>lohellohellohellohellohellohellohellohellohellohellohellohellohello</div>

我正在尝试在br元素的第一行(由浏览器呈现)的最末尾的处添加div标记。

我不想对br标记进行硬编码，因为页面需要响应。并且稍后我尝试在调整页面大小时删除br标记(因此，我可以再次将其添加到新位置)。

如果我可以实现上述解决方案，那么我的问题将得到解决。如果还有其他替代解决方案，请分享。

PS:我没有在寻找任何插件。

答案(已更新):Fiddle

为较大的项目修改了一个:Fiddle

最佳答案

首先，您应该 checkout Rob's answer。 JS是解决此类问题的真正极端手段。

我为您编写了一个简短的实用程序函数，该函数可以执行您想要的操作，它看起来像是剪切了emenet的第一行，并在其后添加了<br>。这将使您将ellipsis保留在第二行。

通常是这样工作的:

创建一个模拟元素

开始一次写一封信

在宽度大于元素

之前停止

将元素的HTML设置为您匹配的文本+ <br /> +其余文本

这是代码:

function appendBR(element){
    var text = element.textContent.split("");
    var width = element.offsetWidth;
    var el = document.createElement("el");
    document.body.appendChild(el);
    while(text.length > 0){
        el.textContent+=text.shift();
        if(el.offsetWidth > width-20){
            element.innerHTML = el.textContent+"<br />"+text.join("");
            document.body.removeChild(el);
            return;
        }
    }
    document.body.removeChild(el);
}

var container = document.getElementById("first");
appendBR(container);

Working fiddle

请注意，如果您希望它不能更改窗口的大小，则可以添加一个侦听器(使用addEventListener并使用attachEvent进行填充)来滚动。这是a working fiddle for that。