html - p元素的长度与其中的文字相同吗？

我只是希望我所有的p元素都是其中文本的长度。如果将.intro p放在inline-block上，则可以使用，但是我希望所有p元素都显示在彼此的下面。有没有办法做到这一点？

HTML：

<div class="intro">
    <p>fjsdqk  dhksjfd kjsh kdshjkd</p>
    <p>hsdqjkf kjdsh</p>
    <p>hdsqkhfj sdhkjf fsjqkfhdks  hjs</p>
</div>

CSS：

.intro {
    margin-top: 80px;
    color: #ffffff;
    text-align: center;
}

.intro p {
    margin-bottom: 12px;
    padding: 6px 12px;
    background: #25d6a2;
}

最佳答案

只需在每个br元素之后添加p标记

<div class="intro">
    <p>fjsdqk  dhksjfd kjsh kdshjkd</p><br>
    <p>hsdqjkf kjdsh</p><br>
    <p>hdsqkhfj sdhkjf fsjqkfhdks  hjs</p><br>
</div>

Demo



如果您不想在DOM中添加<br />或由于某些原因而无法修改HTML，则可以使用CSS :after伪类（具有content和\a属性）模拟换行符>设置为white-space

就pre而言，它是换行的十六进制值，它等效于\a。

p:after {
    content:"\a";
    white-space: pre;
}

Demo