Question

我有一张图像，当翻过来时会显示一些文字，红色背景上是白色。我想在文本行中的每个中断的条带中断，如下面链接的图像。

然而，到目前为止，我所做的就是让文字出现在一个大的红色块中。我希望文本知道如果它对于80％的图像太大而在哪里打破，并且出现在一个新的线上，后面有一个新的红色条带。

这是我到目前为止的一个小提琴。

.thumb {
    position: relative;
    float: left;
}

.text, .text-js {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6em;
    line-height: 1.6em;
    display: none;
    position: absolute;
    top: 15px !important;
    left: 0px;
    text-align: left;
    background: #999;
    background-color: #F63146;
    width:80%;
    padding: 1%;
    display: inline;
    color: #FFF;
    text-transform: uppercase;
}

很抱歉，如果解释不清楚，请提前感谢您的帮助。

Answer 1

然而，到目前为止，我所做的就是让文字显示在一个大的红色区块中。

这就是块元素的呈现方式。（使用绝对定位会阻碍您尝试使用display:inline，这会自动生成元素block。）

但是h2中有一个div元素 - 所以make inline。遗憾的是，你不能在内联元素的虚线的所有边上填充 - 但如果你只想要一个背景颜色来实现效果，你可以使用box-shadow伪造它。

.text-js h2 {
    display:inline;
    background: #F63146;
    box-shadow:-5px 0 #F63146, 5px 0 #F63146;
}

http://jsfiddle.net/mAU3d/5/

Answer 2

实现此目的的最简单方法是将h2显示设置为inline。然后从.text-js中删除背景并将其添加到h2。我还增加了line-height以在行之间添加一些空格。

.text-js h2 {
    display: inline;
    background: #F63146;
    line-height: 1.4em;
}

这是更新的小提琴：http://jsfiddle.net/mAU3d/10/

Answer 3

~~我认为没有必要使用任何假的盒子阴影~~（编辑：盒子阴影实际上很有用，请参阅注释），你只需要设置文本本身的样式（即使用span）而不是包含它的块（这是h2）： http://jsfiddle.net/mastazi/M6APy/

<h2 class="text"><span class="break">Text should break in to new strips</span></h2>

.break{
    background-color: #F63146;
    line-height: 1.6em;
}

在图像上为绝对定位的文本块添加换行符以创建文本条带

3 个答案: