文本分成一个段落

Question

我试图将我的文本放在黑色背景的段落中，并用白线分隔。我成功地使用了文字修饰下划线；唯一的问题是它不会拉伸到全宽，而且对于最后一行来说也不完美。还有其他解决方案吗？谢谢大家

应该是这样的

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

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

-编辑-

要强制中断文本，您可以在您想要的词上添加 <br>。并对齐到中心 margin: auto;

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

Answer 2

您应该可以这样做：

.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>

Answer 3

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

.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);
}

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

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

文本分成一个段落

text divided in a paragraph

html

css

text-decorations