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

Question

我尝试获取html标签 <p> 的默认长度，它应该根据标签 <p> 的高度和宽度进行显示。

例如：

我有以下代码片段：

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

这里，高度是“300”，宽度是“200”。我如何在这个

标签中获取默认字符长度。

任何帮助都会受到赞赏。

- Murali Sharuk

---

你能解释一下“字符长度”是什么意思吗？ - Itay Gal

@Ital Gal 标签 <p> 中可用的空间... - Murali Sharuk

@MuraliSharuk 可用空间是什么意思？ - Surjith S M

@Patsy Issa：是的，它应该按字体大小返回。 - Murali Sharuk

<p>标签中的字符根本没有被渲染出来。p元素中的字符可能会被渲染，但示例中只有一个空格。不清楚问题是否与p元素有关。而且，“默认字符长度”这样的概念是不存在的。如果您指的是平均字符宽度，那么答案取决于字体和平均概念（哪种平均值？）。 - Jukka K. Korpela

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/

- dfsq

---

优秀的横向思维作品 +1 - Liam

Answer 2

由于不是所有字符都具有相同的宽度，因此您无法获得精确的数字。 请参见示例每行有10个字符，但它们的长度不同。

您可以通过将总空间（200*300）除以字体大小（假设为20px）来估算您获得的空间，得到大约3000：200*300/20 = ~3000

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

看看这个：示例2

你有20个1和28个-，它们都占用1行，因此精确的公式不现实。你只能估计它。如果你想得到最好的估计，可以尝试计算每个字符的概率（在此处查看链接），并考虑每个字符的宽度（根据字体和字号），从而估计出你所拥有的“空间”。

- Itay Gal

---

那又怎样？提供字体、字号、行高、字形等信息，你可以说在这个尺寸下只能容纳10个字符，而在那个尺寸下则是20个。这是完全可能的。 - dfsq

这里是解决方案：https://dev59.com/cWTWa4cB1Zd3GeqPBkVk - Bhojendra Rauniyar

@Itay Gal hi 3000 的意思是什么？可用字符或位置是什么？ - Murali Sharuk

估计字符数量 - Itay Gal

Answer 3

<p> 是一个块级元素，因此它将占据其容器的宽度。文档

- jacquard

---

如果<p>被赋予宽度，会怎样？ - codingrose

当然，如果指定了新的宽度，那么它将被分配。我上面的陈述是针对没有分配任何宽度的情况 - 默认情况下。 - jacquard

你无论如何都没有回答OP的问题：提供的容器可以容纳多少个字符。 - dfsq

@theCoder OP已经给出了这个：<p style="height:300px;width:200px;"> </p> - codingrose

我认为我的猜测是正确的，他是指标签的宽度。请看他的评论：“@Ital Gal标签<p>中可用空间。” - jacquard