Question

我有div（固定宽度），里面有一些文字。这个div有边框和背景颜色。 enter link description here

当需要多行时，我可以做一些事情来让div包裹文本吗？有没有解决方案？（maby css或svg等） enter link description here

Answer 1

使用span而不是div

<span class='text'>this is some text <br/>
and the rest </span>

span{
    background:red;
}

Answer 2

要为文本提供包含文本中断的背景，您需要将div设置为“display：inline”。这个例子将为文本提供一个包装它的背景。

但是，这可能会破坏你的固定宽度。您可能希望将背景应用于div中的段落元素，因此段落文本具有背景但不具有div。希望这会有所帮助。

<!doctype html>
<html>
<head>
<title></title>
<style>
p {
    display: inline;
    background: #ccc;
}
</style>
</head>
<body>

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

</body>
</html>

CSS。如何使盒子包装它的内部文本

2 个答案: