Javascript 向图像上绝对定位的文本块添加换行符，以创建文本条

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

然而，到目前为止，我所做的只是将文本显示在一个大的红色块中。我想让文本知道如果它对于80%的图像来说太大，应该在哪里断开，然后在新的一行后面出现一条新的红色条纹

这是我到目前为止所拥有的一把小提琴

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

然而，到目前为止，我所做的只是将文本显示在一个大的红色块中

这就是块元素的渲染方式。（您尝试使用

display:inline

的过程因使用绝对定位而受阻，这会自动使元素

块

）

但是在

div

中有一个

h2

元素，所以将其设置为

inline

。遗憾的是，在一个内联元素中，你不能在虚线的所有边上都得到填充，但是如果你只是想要背景色的效果，你可以用一个

框阴影来伪装它

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


然而，到目前为止，我所做的只是将文本显示在一个大的红色块中

这就是块元素的渲染方式。（您尝试使用
display:inline
的过程因使用绝对定位而受阻，这会自动使元素
块
）

但是在
div
中有一个
h2
元素，所以将其设置为
inline
。遗憾的是，在一个内联元素中，你不能在虚线的所有边上都得到填充，但是如果你只是想要背景色的效果，你可以用一个
框阴影来伪装它

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

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

.text js h2{
显示：内联；
背景#F63146；
线高：1.4em；
}

下面是更新的提琴：
实现这一点的最简单方法是将
h2
显示设置为
inline
。然后从
.text js
中删除背景，并将其添加到
h2
中。我还增加了
行高度
，以在行之间增加一些空间

.text js h2{
显示：内联；
背景#F63146；
线高：1.4em；
}

以下是更新后的提琴：
我认为没有必要使用任何假框阴影（编辑：框阴影实际上很有用，请参见注释），您只需要设置文本本身的样式（即使用跨度），而不是包含它的块（即h2）：

文本应插入到新条带中
.休息{
背景色：#F63146；
线高：1.6em；
}
我认为没有必要使用任何假框阴影（编辑：框阴影实际上很有用，请参见注释），您只需要设置文本本身的样式（即使用跨距），而不是包含它的块（即h2）：

文本应插入到新条带中
.休息{
背景色：#F63146；
线高：1.6em；
}
没有阴影，每行前后都没有红色空格。我使用
框阴影
来模拟
向左填充
和
-向右填充
对单行文本的效果。但是，一旦一个
inline
元素的文本经过多行，填充只应用于第一行之前和最后一行之后，这可能不是这里想要的效果<代码>框阴影
但是以同样的方式应用于每一行。公平地说，我没有考虑到这一点。没有阴影，每一行前后都没有红色空格。我使用
框阴影
来模拟
左填充
和
-右填充
将对单行文本产生的效果。但是，一旦一个
inline
元素的文本经过多行，填充只应用于第一行之前和最后一行之后，这可能不是这里想要的效果<代码>框阴影

但是对每一行都适用相同的方式。很公平，我没有想到这一点。很好，谢谢。谢谢你给我关于盒子阴影的提示，这是我在网站其他地方想知道的。太好了，谢谢。谢谢你给我关于盒子阴影的提示，这是我在网站其他地方想知道的。

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

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