Question

我试图找出具有固定宽度的容器内部段落的实际宽度。我在段落中添加了float:left，认为这样可行，但它会返回容器宽度的宽度。

更新

CSS

.outer {
    max-width: 320px;
    background: #fff;    
    display: inline-block;  
    box-sizing: border-box;
}
.inner span {      
    float: left;
    background: #ccc;
}

HTML

<div class="outer">
    <div class="inner"> 
        <span>
            <p>Vivamus suscipit tortor eget felis porttitor volutpat</p>  
        </span>
    </div>
</div>

JQUERY

我想根据段落的实际宽度更改.outer的宽度，但我无法找出实际宽度。我使用$('.inner span').innerWidth())输出宽度。

的jsfiddle

http://jsfiddle.net/f2br8ppw/9/

在我的例子中，段落中最长线的宽度＆＃34; Vivamus suscipit torto＆＃34;明显小于320px。如何获得段落的实际宽度？（段落的最长行结束的地方是宽度应该结束的地方 - 白色背景应该以“＃34; torto＆＃34;”这个词结束。）

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

Answer 1

如果不使用JavaScript，我无法想到实现这一目标的方法。也就是说，一旦你这么做就相当简单。

我们需要将段落的显示设置为inline，这将使其具有确切的宽度，而不是inline-block或使用float将包装到容器＆＃39;内容溢出到多行后的宽度。

我们需要做的就是简单地计算段落的宽度和加载时的容器，以及适当的空间。 See Fiddle：

＆＃13;

var $container = $(".outer"),
    $paragraph = $("p", $container);

$container.css("padding-left", ($container.width() - $paragraph.width()) / 2);

＆＃13;

p {
    font-size: 30px;
    background-color: #ccc;
    display: inline;
}

.outer {
    width: 320px;
    background-color: #ddd;
    box-sizing: border-box;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <p>Vivamus suscipit torto eget felis porttitor volutpat</p>  
</div>

＆＃13;

Answer 2

输出正确：段落的宽度确实 320px 。它并不像你想象的那么小，因为.outer容器的宽度因填充而更大。

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

你想让它变小吗？然后将box-sizing: border-box规则添加到.outer容器：

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

Jquery在固定宽度内获得段落的宽度

2 个答案:

演示：http://jsfiddle.net/f2br8ppw/4/