小编Nat*_*ate的帖子

如何仅将CSS样式应用于文本

我正在尝试将样式应用于HTML文本.我想要的基本上是:

我得到的基本上是:

如您所见,第一行是缩进的,但不是任何其他行.到目前为止,我有一个内部的文本<span>,它嵌套在一个内部<div>.

.slide-text .text {
  background-color: rgba(0, 0, 0, .6);
  color: #FFF;
  padding: 8px 17px;
}
.slide-text .slide-title {
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-weight: 700;
}
.slide-text .slide-content {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 500;
}

Run Code Online (Sandbox Code Playgroud)

My HTML code is:
<div class="slide-text">
  <div class="slide-title"><span class="text">[TITLE]</span>
  </div>
  <div class="slide-content"><span class="text">[TEXT]</span>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

只要标题或内容都不超过一行,它们就能很好地工作.一旦它们越过两条或更多条线,跨度就会失去其内部衬垫.更改内部跨度,display: inline-block;一旦进入两行,就会显示一个块.有没有办法获得我想要的效果？

html css innertext

Nat*_*ate

2015 11-11

5
推荐指数

1
解决办法

7452
查看次数