Javascript Jquery获取固定宽度内的段落宽度

我试图找出一个固定宽度的容器中段落的实际宽度。我在段落中添加了

float:left

，认为这样做可行，但它返回了容器宽度的宽度

已更新

CSS

HTML

维瓦摩斯寄居猫寄居地猫寄居地猫寄居地猫寄居地猫寄居地猫寄居地猫寄居地猫寄居地猫寄居地猫寄居地猫寄居地猫寄居地猫寄居地猫寄居地猫寄居地猫寄居地猫寄居地

JQUERY

我想根据段落的实际宽度更改

.outer

的宽度，但我找不到实际宽度。我正在使用

$（'.inner span'）.innerWidth（））

输出宽度

JSFIDLE

在我的例子中，“Vivamus suscipit torto”一段中最长线条的宽度明显小于320px。如何获得段落的实际宽度？（如果段落最长的一行结束，则宽度应结束-白色背景应在单词“torto”处结束）

---

目标：完全居中对齐的文本。我在JSFIDLE中添加了一个白色背景作为视觉指南。如果没有背景，文本看起来不会完全居中，因为段落右侧有一个明显的空格。

输出是正确的：段落的宽度确实是320px。它并不像你们想象的那个样小，因为

.outer

容器的宽度由于填充而更大

默认情况下，实际元素宽度是宽度+填充+边框的总和

你想要小一点吗？然后将规则添加到

。外部
容器：

.outer {
    /* ... */
    box-sizing: border-box;
}

演示：除了使用JavaScript之外，我想不出一种实现这一点的方法。也就是说，一旦你这么做了，事情就相当简单了

我们需要将段落的显示设置为
inline
，这将采用它的确切宽度，而不是
inline block
，或者使用
float
，一旦内容溢出到多行，它将包装到容器的宽度

我们需要做的只是简单地计算段落的宽度和装载的容器，以及适当的空间：


var$container=$（“.outer”），
$段落=$（“p”，$容器）；
$container.css（“padding left”，（$container.width（）-$paration.width（））/2）
p{
字体大小：30px；
背景色：#ccc；
显示：内联；
}
.外部{
宽度：320px；
背景色：#ddd；
框大小：边框框；
}

猫科动物寄居地Vivamus suscipit torto eget felis porttitor Volatipat

您看到的宽度是元素的宽度，而不是其中的文本。文本正在包装以适合元素。现在问题更清楚了，提供了更新的答案：）谢谢。我的问题似乎不是很清楚。请参阅问题更新。我在底部澄清了。谢谢！似乎这只能通过js实现。
<div class="outer">
    <div class="inner"> 
        <span>
            <p>Vivamus suscipit tortor eget felis porttitor volutpat</p>  
        </span>
    </div>
</div> 

.outer {
    /* ... */
    box-sizing: border-box;
}