有没有办法根据自动换行拆分div？

Question

我有一个相当简单的div,我用CSS设置了样式

.text { text-transform: capitalize;
        color: #FFFFFF;
        background: #918a8a;
        opacity: 0.6;
        font-size: 2em;
        height: 80px;
        width: 200px;
     }

它基本上是一个带有一些白色文本的灰色框,尺寸为200px×80px.

我想要发生的是如果文本超过200px并包装到下一行,则添加一些透明的空格.

所以,例如,如果我有以下HTML:

<div class="text">Here is some text that I typed</div>

我会得到这个:

如果背景是不同的颜色(在本例中为蓝色),则"空白"将是透明的并允许蓝色通过.背景颜色取决于用户选择的内容.它也可能是一张图片,所以我无法确定它是什么.

假设文本超过200px大小并自动换行.没有两个单独的div标签.我也无法控制文本的长度 - 它可以是0到60个字符之间的任何位置.

Answer 1

您可以通过以下方式执行此操作repeating-linear-gradient：

.text {
  font-size: 30px;
  line-height: 50px;
  background-image: repeating-linear-gradient(
    blue, 
    blue 45px,
    transparent 45px,
    transparent 50px
  );
}

前两种颜色将是您的“背景”颜色，它们将覆盖您的文本。

接下来的两种颜色是transparent，它们将以文本的 结束line-height。

片段：

.text {
  font-size: 30px;
  line-height: 50px;
  background-image: repeating-linear-gradient(
    blue, 
    blue 45px,
    transparent 45px,
    transparent 50px
  );
}

body {
  background: #cfc;
}

.text {
  color: #FFFFFF;
  width: 300px;
  font-size: 30px;
  line-height: 50px;
  background-image: repeating-linear-gradient(
    blue, 
    blue 45px,
    transparent 45px,
    transparent 50px
  );
}