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

在我的项目中，我试图在元素

div

中添加

元素。所以，我可以在第二行显示省略号

下面是我硬编码

br

标记的示例

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

hellohello
lohellohellohellohellohellohello

我正在尝试在

div

元素的第一行的末尾添加

br

标记（由浏览器渲染）

我不想硬编码

br

标记，因为页面需要响应。之后，当页面调整大小时，我尝试删除

br

标记（这样，我可以在新位置再次添加它）

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

附言：我不寻找任何插件包括

答案（更新）：

---

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

似乎您试图为给定的任务使用错误的工具。要自动换行，请使用CSS属性。所有主流浏览器都支持它（Opera12不支持，但基于Chromium的Opera15支持）

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

---

要使演示正常工作，请删除

溢出：隐藏
并更改
空白：pre
至
空白：预换行
如果可以，您最好将其用作省略号：

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

如果没有足够的空间，这将自动将
..
添加到字符串末尾。
我希望这就是您想要的方式

我已经更新了小提琴：


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;
}

首先，你应该退房。JS是解决这类问题的一种非常极端的方法


我为您编写了一个简短的实用程序函数，它可以满足您的需要，它看起来像是剪切了al-emenet的第一行，然后在后面添加了一个

。这将使您在第二行保留
省略号

以下是它的工作原理：


创建一个模拟元素
开始一次写一封信
在其宽度大于元素之前停止
将元素的HTML设置为匹配的文本+

+文本的其余部分

代码如下：

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);

函数appendBR（元素）{
var text=element.textContent.split（“”）；
变量宽度=element.offsetWidth；
var el=document.createElement（“el”）；
文件.正文.附件（el）；
而（text.length>0）{
el.textContent+=text.shift（）；
如果（标高偏移网络宽度>宽度-20）{
element.innerHTML=el.textContent+“
”+text.join（“”）；
文件.正文.删除文件（el）；
返回；
}
}    
文件.正文.删除文件（el）；
}
var container=document.getElementById（“第一”）；
附件BR（容器）；

注意，如果您希望它不改变窗口的大小，您可以添加一个侦听器（使用addEventListener并使用attachEvent填充）来滚动。这是
 我不知道如何写这个，但你不能在这里添加一个span类，并在其中执行add.class remove.class场景，如果（页面被调整大小）。然后（这会发生）？我知道你说没有插件，但这可能会有帮助？使用innerHTML如何？您所指的“第一行”是什么？这是你的第一行还是浏览器呈现的第一行？@RobertKoritnik first line是浏览器呈现的。我还怀疑他在找这个。。。这是更好的，因为浏览器将处理所有这些与适当的CSS。我想在第二行显示省略号。我尝试了你的解释，它显示了类似这样的情况，
全部中断
和
文本溢出
的组合似乎不起作用。。。省略号不会显示。。。和@Mr_Green:您希望省略号始终显示还是仅当第二行后有更多文本时显示？当第二行后有更多文本时。。我自己编写了代码，但没有效果。在心理医生身上搞砸了。@U!Green先生，这是一个好主意<代码>空白：预换行
和
分词：全部换行
指示浏览器尽可能多地换行。结果是文本永远不会溢出，因此
文本溢出
永远没有机会启动。你想解决的问题是什么？“尽量放在一个盒子里，如果不合适，在底部显示省略号”？这将在第一行显示省略号。我知道。我想把第二行的省略号去掉。我正在寻找一个解决方案，这是响应，因为宽度将在百分比。