Css a中的多行文字<；部门>；使用普通的换行字：如何使其底部更长？

假设我有一个

，其中有一些预定义的长标题。

具有固定的最大宽度，因此较长的文本会被分成两行

一些网站的头条新闻

此

的

最大宽度

设置为强制将文本分成两行的某个值。问题是，对于一个单词组合，上面一行的最后一个单词可以放在上面一行和下面一行，我如何使底线“更重”（也就是说，把这个单词放在底线上）

举个例子，使用标准样式，我得到的单词wrap是：

========================
|                      |
|  LOONG HEADLINE FOR  |
|     SOME WEBSITE     |
|                      |
========================

而所需的换行字将是：

========================
|                      |
|    LOONG HEADLINE    |
|   FOR SOME WEBSITE   |
|                      |
========================

我知道设置例如

左填充

和

右填充

可能会有帮助，但我也希望正常、精确地匹配到div标题中，使不分为两行：

========================
|                      |
|HEADLINE FITS THE DIV!|
|                      |
========================

---

也没有办法知道/设置文本中的行数。它应该自动完成，因此我不能使用两个

元素，每个元素对应一行，也不能强制

到文本中。

在DOM中插入一个虚拟div：

#dummy-div { position:absolute; z-index: 100; left: -10000px; top: -10000px; /* div is off the screen */ }

现在有一些jQuery：

var container_text = $("#long_message_div").text();
$("#dummy-div").html(container_text);

现在获取虚拟宽度：

var dummy_width = $("#dummy-div").width();

现在比较所需容器的最大宽度和虚拟容器的宽度：

if (dummy_width > your_max_width) {
    //want more content on bottom
    if (container_text.match(/\s/)) {
        //white spaces imply word boundaries - so split on white spaces
        var split_array = container_text.split(" "),
            split_length = split_array.length;

        //Now reformat the container's text to insert a line break less than halfway between.

        var less_than_half = Math.floor(split_length / 2);
        //Now form and insert the new content
        var i = 0, newContent = '';

        for(; i < split_length; i++) {
            newContent += split_array[i] + (i !== less_than_half ? ' ' : '<br>');
        }

        document.getElementById("long_message_div").innerHTML = newContent;

    } else {
        // otherwise this is a long unbroken string so just word wrap
    }
} else {
    //do nothing
}

if（虚拟宽度>您的最大宽度）{
//想要在底部有更多的内容吗
if（container\u text.match（/\s/））{
//空格意味着单词的边界-所以在空格上拆分
var split\u array=container\u text.split（“”），
split_length=split_array.length；
//现在重新格式化容器的文本，以插入一个不到中间的换行符。
var小于等于一半=数学楼层（拆分长度/2）；
//现在形成并插入新内容
var i=0，newContent=''；
对于（；i”）；
}
document.getElementById（“long\u message\u div”）.innerHTML=newContent；
}否则{
//否则这是一个长的未断字符串，所以只需换行即可
}
}否则{
//无所事事
}

尝试使用

垂直对齐：底部

div{
显示：表格；
宽度：100%；
最大宽度：200px；
最小高度：60px；
边框：1件带点#000；
利润率：10px自动；
}
跨度{
空白：预处理；
/*但我真的不知道为什么空白区不能保持*/
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
}
某网站的头条新闻
某网站的头条新闻
标题适合这个部门
您可以为此项目使用后端脚本语言吗？（例如PHP）或者您可以使用Javascript吗？也是最大宽度变量，或者它是一个已知值吗？可以帮助您吗？我猜这个解决方案会有点难complicated@TheOneandOnlyChemistryBlob-文本通过web内容添加，HTML模板在FreeMarker中生成。我可以在项目中使用JavaScript。我根据photoshop创建的模型选择的最大宽度。当我运行代码段时，它在前两个div中显示了相同的错误包装…但是你知道必须将wbr放在哪里吗？我的意思是，你会编写任何长内容的代码吗？我之前告诉过你，我事先不知道把
放在哪里，那么你怎么知道你必须在哪里中断呢？嗨，我真的很喜欢巡演答案，但问题是他不知道哪个是长消息，所以他的问题是废话。