2

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

这是我对标签进行硬编码的小提琴。br

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

我试图在元素的第一行（由浏览器渲染）的最后添加br标签。div

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

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

PS：我不是在寻找要包含的任何插件。

答案（更新）：小提琴

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

4

4 回答 4

4

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

与任何 JavaScript 方法相比，此方法的优势在于它可以正确处理 unicode 字符（否则您将不得不手动计算每个单词的宽度、呈现结果、验证宽度并重试——这听起来很昂贵） .

要让您的演示工作，请删除overflow:hidden并更改white-space:pre;为white-space:pre-wrap.

于 2013-07-26T13:27:38.983 回答
2

首先，您应该查看Rob 的答案。JS 是解决这类问题的一种非常极端的方法。

我为您编写了一个简短的实用程序函数，它可以执行您想要的操作，它看起来会削减 al 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);

工作小提琴

请注意，如果您希望它能够抵抗更改窗口的大小，您可以添加一个侦听器（使用 addEventListener 并使用 attachEvent 填充）来滚动。这是一个工作小提琴。

于 2013-07-26T13:55:08.693 回答
0

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

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

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

于 2013-07-26T13:28:58.027 回答
0

我希望这是你想要的..

我已经更新了小提琴：

检查演示

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;
}
于 2013-07-26T13:29:17.497 回答