jquery - 仅占两行的宽度

Question

我可能有短文本或长文本，但无论如何我想定义我的 div 的宽度，以便文本分为两行。

短文本

+--------------+
| 短文本在这里 |
| 短文本在这里 |
+--------------+

长文本

+-------------------------------------------------- -------------------+
| 此处为长文本 此处为长文本 此处为长文本 |
| 此处为长文本 此处为长文本 此处为长文本 |
+-------------------------------------------------- ------------------+

所以无论文本是短还是长，它的宽度都是两行。我怎样才能做到这一点？

如果用 css 不可能，有没有办法用 jquery 完成这个？

Answer 1

jsFiddle 演示

CSS：

.two-lines {
    background-color: yellow;
    display: inline-block;
    white-space: nowrap;
}
.two-lines.wrapped {
    white-space: normal;
}

JS：

$(".two-lines").each(function () {
    var $width = $(this).width();
    $(this).width($width / 2)
           .addClass("wrapped");
});

---

编辑：这是一种更准确的方法

jsFiddle 演示

$(".two-lines").each(function () {
    var $lines = $(this).height() / parseInt($(this).css("lineHeight"));

    while (($lines > 2) || ($(this)[0].scrollWidth > $(this).width())) {
        $(this).width("+=1");
        $lines = $(this).height() / parseInt($(this).css("lineHeight"));
    }
});

Answer 2

不是单标签。但是，如果源修改对您可行，您可以选择以下方法：

<div>
    <p>long text goes here long text goes here long text goes #</p>
    <p>long text goes here long text goes here long text goes</p>
</div>

<style>
    div > p {
        white-space:nowrap;
    }
</style>

两条线永远是一条线。现在您没有为您的 div 设置宽度，因此它将扩展以容纳文本。