背景和边框根据最长的行换行文本 - CSS

Question

我想用 4 行边框将段落和 UL 包起来，并给它黑色背景。

我希望边框和背景根据最长行的长度包裹所有文本，我可以一次一行完成，但这意味着行与行之间没有背景色，而我想要背景和边框将所有文本包裹在一起。

不知道该怎么做。

这是我的HTML代码

<p><span class="commentBorder">
    some text about the next lines:
</span></p>
<ul>
    <li><span class="typesBorder1">first line text.</span></li>
    <li><span class="typesBorder2">second line text.</span></li>
    <li><span class="typesBorder3">third line text.</span></li>
    <li><span class="typesBorder4">fourth line text.</span></li>
</ul>

这是我的 CSS 代码：

.commentBorder{
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
}
.typesBorder1{
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
}
.typesBorder2{
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
}
.typesBorder3{
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
}
.typesBorder4{
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
}

Answer 1

ul {
 background-color: rgba(0,0,0,0.5);
 border: 1px solid black;
}

我觉得你想要整个ul的背景色，你可以去掉每个li的背景色

Answer 2

你的意思是这样的？:

.parent {
    width: fit-content;
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
    margin: 0 auto;
}

<div class="parent">
<p><span class="commentBorder">
    some text about the next lines:
</span></p>
<ul>
    <li><span class="typesBorder1">first line text.</span></li>
    <li><span class="typesBorder2">second line text.</span></li>
    <li><span class="typesBorder3">third line text.</span></li>
    <li><span class="typesBorder4">fourth line text.</span></li>
</ul>
</div>

不幸的是，没有“干净”的方法来实现这一点，除非您添加一个包裹整体的父层。

请注意，我向其中添加了 width: fit-content，以便它适应最宽的元素。

背景和边框根据最长的行换行文本 - CSS

background and border wrap text according to longest line - CSS

html

css

border

background-color