文字分为

Question

我试图将我的文字放在一个用白线划分的黑色背景段落中。我成功地用文字装饰下划线;唯一的问题是它不会伸展到全宽，并且它不适合最后一行。还有其他解决方案吗？谢谢你们

它应该是这样看的

http://codepen.io/HendrikEng/pen/LkXjWo

HTML：

<h1 class="o-outline--black">Lorem Ipsum impsum psuspspspspsp</h1>

CSS：

.o-outline--black {
    width: 30%;
    display: block;
    text-transform: uppercase;
    padding: 0.15em 0.6em 0.15em 0.6em;
    background: black;
    color: white;
    text-decoration: underline;
 }

Answer 1

您可以使用线性渐变来获得您之后的效果：

＆＃13;

＆＃13;

.o-outline--black {
  width: 30%;
  text-transform: uppercase;
  text-align: center;
  padding: 0.15em 0.6em 0.15em 0.6em;
  background: black;
  color: white;
  background-image: repeating-linear-gradient(180deg, transparent, transparent 35px, white 35px, white 40px);
}

＆＃13;

<h1 class="o-outline--black">Lorem Ipsum impsum psuspspspspsp</h1>

＆＃13;

＆＃13;

＆＃13;

您可以调整像素值，将线条准确定位在您需要的位置。

Answer 2

display: inline;可能会解决您的问题。这样黑色BG将只是文本的位置。

- 编辑 -

要强行破解文字，您可以在所需的字词上添加<br>。并调整到中心margin: auto;

http://codepen.io/sandrina-p/pen/AXmoxJ

Answer 3

您应该能够这样做：

.o-outline--black {
/*width: 40%;*/
display: block;
text-transform: uppercase;
padding: 0.15em 0em;
  background: black;
  color: white;
  /*text-decoration: underline;*/
text-align:center;
margin:0px;
padding:0px;
}

.line
{
  width:100%;
  border-bottom:15px solid #ffffff;
}

<h1 class="o-outline--black underline">
<div class="line">marken-und</div>
<div class="line">packungsdesign. seit</div>
<div class="line">1997.</div>
</h1>


 <h1 class="o-outline--black underline">marken-und<br>packungsdesign. seit<br>1997.</h1>