Question

我试图在html中获取<p>标记的默认长度，它应该根据高度和高度显示。标记<p>的宽度。

对于Eg：

我有这段代码，

<p style="height:300px;width:200px;"> </p>

这里，身高是“300”＆amp;宽度是“200”。如何在此<p>标记中获取默认字符长度。

任何帮助表示感谢。

Answer 1

您应该使用帮助程序容器（对用户隐藏）。这个想法是你在这个容器（和样式）中复制文本并测量它的宽度。

考虑这个例子：

var $container = $('.container'),
    height = $container.height(),
    width  = $container.width();

$('button').click(function() {
    $container[0].innerHTML += random();
    if (!checkFit($container)) {
        alert(['overflow! max chars ', $container.text().length - 1]);
    }
});

function checkFit($el) {
    var $clone = $el.clone().addClass('clone').appendTo('body');
    return $clone.width() <= width && $clone.height() <= height;
}

演示：http://jsfiddle.net/NrkQC/

Answer 2

<p>是块级元素，因此它将占用其容器的宽度。 Documentation

Answer 3

您根本无法获得确切的数字，因为并非所有字符都具有相同的宽度。 See example每行有10个字符但它们的长度不同。

您可以通过除以字体大小（例如20px）的总空间（200 * 300）来估算得到的空间，并得到：200 * 300/20 = ~3000

<p>
    abcdefghig<br />
    0123456789<br />
    !@#$%^&*()<br />
</p>

看看这个：example 2

你有20 1 s和28 -，他们都有1行，所以确切的公式是不现实的。你只能估计它。如果你想得到最好的估计，你可以尝试计算每个字符的概率（see link here）并考虑每个字符的宽度（根据字体系列和字体大小）你可以估计你得到的“空间”

如何根据高度和宽度在<p>标签中找到默认的字符长度？</p>

3 个答案:

演示：http://jsfiddle.net/NrkQC/