jQuery如何以像素为单位获取段落的宽度？答案

【问题标题】：jQuery how to get paragraph's width in px?jQuery如何以像素为单位获取段落的宽度？
【发布时间】：2018-11-27 05:58:49
【问题描述】：

我有以下；

<div class="pin">
<p class="pin-text hidden">text</p>
</div>

和 JS：

form.on('mouseover', '.pin', function(e) {
    var id = this.id;
    if($('#' + id).children('p.pin-text').length) {
        pin_text_width = ($('#' + id).children('p.pin-text').parent().width()).toString() + 'px';
        pin_text = $('#' + id).children('p.pin-text').text();
    }
});

我需要找到段落的文本宽度，以便调整宽度可变的 PNotify 工具提示：

tooltip = new PNotify({
    text: pin_text,
    width: pin_text_width,
    ....

如何计算文本（字）的宽度？

【问题讨论】：

首先你的.pin 元素没有id。其次，您可以只使用 $(this) 来获取元素，而不是获取 id 并将其连接到选择器
好的，但这并不能解决宽度问题
这就是为什么它是一个评论。没有足够的关于你的提示库的上下文，以及它与p 元素的计算宽度的精确结合——尤其是在有多个p 元素的情况下。您是在定义多个工具提示，还是一个实例？一个可行的例子会有很大帮助
一个工作示例是一千行长。我动态显示带有附加文本的引脚（来自数据库）。如果我这样做 alert($(this).children('p.pin-text').parent().html()) - 它会显示整个
html。但是 alert($(this).children('p.pin-text').parent().width()) 返回零宽度。
我意识到这不是我需要的，我正在尝试获取父级的宽度，而我需要获取文本本身的宽度以使该段落具有该宽度。我会更新帖子。

标签： jquery width pnotify

【解决方案1】：

试试jQuery width。示例：

var foo = $(".hidden").width();
alert(foo);

【讨论】：

这可以单独使用，但不能在 PNotify 上使用。我想这可能与它的包装元素有关。
您可以使用 firebug/chrome 开发工具检查它并查看那里报告的宽度。