p元素的長度與其中的文字相同嗎？

我只是想讓我的所有p元素成爲文本的長度。如果我把.intro p設置爲inline-block，但是我希望我的p元素全部顯示在下面。有沒有辦法做到這一點？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; 
}

來源

2014-06-05 2339870

介意解釋*爲什麼*您需要知道文本的長度？似乎需要知道一件不尋常的事情。 – Blazemonger

每個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

後只需添加 br標籤

如果你不希望添加<br />在DOM或由於某種原因，你不能修改你的HTML，您可以使用CSS :after僞利用具有\a的價值和white-space設置爲precontent財產模擬線路中斷

只要解釋爲\a，它的換行十六進制值相當於10。

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

Demo

來源

2014-06-05 17:37:56

謝謝，這個作品！只是一個問題：這是做到這一點的「正確」方式嗎？ – 2339870

你可以做到這一點沒有HTML –

@ 2339870這是正確的，但不知道爲什麼你想要所有的'P'元素內嵌... –

從某種意義上說，你要吃你的蛋糕，並保持它：讓儘可能框格式被認爲是p元素內聯元素（在這種情況下，爲宗旨僅在文本背後設置背景），但是從新鮮線條開始意義上阻擋元素。

有各種方法和技巧，但也許最簡單的是使用浮動（而不是display: inline-block）：將元素向左浮動但也清除浮動，以便不發生真正的浮動 - 您只需要側面浮動的效果，使元素一樣寬其內容的效果需要：

.intro p { 
    float: left; 
    clear: both; 
}

此外，你需要設置clear: both開場後的元素。

來源

2014-06-05 18:08:37

爲什麼不只是內聯而不是內聯？ –

@AliGajani，'display：block'根據可用空間允許的寬度使'p'元素滿足問題的基本要求。 –

p元素的長度與其中的文字相同嗎？

回答

相關問題