Question

在我的项目中，我尝试在元素<br>中添加div元素。所以，我可以在第二行显示省略号。

以下是我{em>硬编码 br标记的fiddle。

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

我正在br元素中的第一行的最后一行（由浏览器呈现）添加div标记

我不想对br标记进行硬编码，因为页面需要响应。后来我试图在页面调整大小时删除br标记（所以我可以在新位置再次添加它）。

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

PS：我不想要包含任何插件。

回答（已更新）：Fiddle

修改了一个更大的项目： Fiddle

Answer 1

您似乎正在尝试使用错误的工具执行给定任务。要自动换行长行，请使用word-break: break-all; CSS属性。它受到所有主流浏览器的支持（Opera 12不支持它，但基于Chromium的Opera 15支持它。）

这种方法优于任何JavaScript方法的优点是它可以正确处理unicode字符（否则你必须手动计算每个单词的宽度，渲染结果，验证宽度并再试一次 - 这与听起来很棒）。

要让您的演示有效，请移除overflow:hidden并将white-space:pre;更改为white-space:pre-wrap。

Answer 2

首先，您应该查看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。

Answer 3

如果可以的话，最好将它用于省略号：

width:80px;
overflow:hidden; 
text-overflow:ellipsis;
white-space:nowrap;

如果空间不足，这将自动将...添加到字符串的末尾。

Answer 4

我希望这就是你想要的......

我更新了小提琴：

<强> Check the Demo

div {
    min-width: 45px;
    width:40%;
    max-height:40px;
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */;
    overflow:auto;

    text-overflow:ellipsis;
    border: 1px solid green;
    word-break: break-all;
}

在文本之间添加br标记（第二行的省略号）

4 个答案:

Working fiddle