Question

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

简短文字

+ ------------------------- +
  |短文到这里|
  |短文到这里|
  + ------------------------- +

长文

+ ---------------------------------------------- ---------------------- +
  |长篇文章在这里长文本在这里长文本去|
  |长篇文章在这里长文本在这里长文本去|
  + ------------------------------------------------- ------------------- +

因此无论文本短或长，它的宽度都是两行。我怎么能做到这一点？

如果用css不可能，那么用jquery来完成这个吗？

Answer 1

jsFiddle Demo

<强> 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 Demo

$(".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设置宽度，因此它将扩展以容纳文本。

宽度仅占两行

2 个答案: