多行具有包裹的背景色
[英]Multiple lines with wrapped background color
问题描述
I have several different spans all wrapped up in a single div and I'm trying to add background color that wraps close to the text instead of a block (rectangle) around the span. 
我有几个不同的跨度都包裹在一个div中，并且我试图添加环绕文本的背景色，而不是跨度跨一个块（矩形）。 So, I'm using inline , but this then puts all the spans on the same line. 因此，我正在使用inline ，但这会将所有跨度放在同一行上。 How can I get this background effect but putting getting line breaks in between the spans. 如何获得此背景效果，但要在跨度之间插入换行符。 Note that I can't change the HTML, but I have full control over CSS. 请注意，我无法更改HTML，但是可以完全控制CSS。
body { background-color: red; color: #fff } #page { width: 800px; } .header-content { width: 500px; } h1.module_header, .fullwidth_header_subhead, .header_content_wrapper { display: inline; background: #292d31; box-shadow: 10px 0 0 #292d31, -10px 0 0 #292d31; }
<body> <div id="page"> <div class="header-content"> <h1 class="module_header"> This is the really long main title that can be many lines </h1> <span class="fullwidth_header_subhead"> Here is a subhead that can also be multiple lines so this can wrap also </span> <div class="header_content_wrapper"> <span> Here is a shorter line but could be multiple lines </span> </div> </div> </div> </body>
You can see the result here: https://codepen.io/jonmrich/pen/gdjBbK 您可以在这里查看结果： https : //codepen.io/jonmrich/pen/gdjBbK
1 个解决方案
解决方案1
0 2018-09-15 01:59:56
One trick is to use the ::after pseudo-element to insert a line break character. 一种技巧是使用::after伪元素插入换行符。 You have to set white-space to pre in order for it to not collapse like other white space. 您必须将white-space设置为pre ，以使其不会像其他空白一样崩溃。 The use of white-space: pre is credited to this answer by Adrift . Adrift将white-space: pre的用法归功于此答案 。
To add space between the lines, simply make the ::after pseudo-element display:block . 要在行之间添加空格，只需将::after伪元素display:block 。 That will add a line below the current line at the same font size as the element it is "after" . 这将在当前行下方添加一行，并与它的“ after”元素具有相同的字体大小 。 Set the font-size property to equalize the height. 设置font-size属性以使高度相等。
body { background-color: red; color: #fff } #page { width: 800px; } .header-content { width: 500px; } h1.module_header, .fullwidth_header_subhead, .header_content_wrapper { display: inline; background: #292d31; box-shadow: 10px 0 0 #292d31, -10px 0 0 #292d31; } h1.module_header::after, .fullwidth_header_subhead::after, .header_content_wrapper::after { content: '\\0A'; white-space: pre; display: block; font-size: 10px; }
<body> <div id="page"> <div class="header-content"> <h1 class="module_header"> This is the really long main title that can be many lines </h1> <span class="fullwidth_header_subhead"> Here is a subhead that can also be multiple lines so this can wrap also </span> <div class="header_content_wrapper"> <span> Here is a shorter line but could be multiple lines </span> </div> </div> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.