有没有办法根据自动换行拆分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
  );
}

前两种颜色将是你的＆＃34;背景＆＃34;颜色，它们将覆盖你的文字。

接下来的两种颜色是transparent，它们会在文字line-height处结束。

<强>段：

＆＃13;

＆＃13;

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

＆＃13;

<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我能够想出一些有用的东西，但遗憾的是灰色背景不是容器的宽度。你也需要div中的跨度。

.text-highlight {
  background:#fff;
  width:200px;
}
.text-highlight span {
  font-size:24px;
  color:#000;
  background:#ccc;
  line-height:42px;
}

<div class="text-highlight">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, et, ratione. At facere nisi facilis nulla officiis, suscipit saepe quos cum et sequi nostrum amet atque non quam, consequatur dolor.</span>
  </div>

编辑：你可以通过在父容器中指定它来证明内联元素的宽度......但是它可能看起来不太好。

.text-highlight {
  background:#fff;
  width:200px;
  text-align:justify;
}
.text-highlight span {
  font-size:24px;
  color:#000;
  background:#ccc;
  line-height:42px;
}

<div class="text-highlight">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, et, ratione. At facere nisi facilis nulla officiis, suscipit saepe quos cum et sequi nostrum amet atque non quam, consequatur dolor.</span>
  </div>

Answer 3

我不确定如何使用单个div元素。请检查以下代码。这可能会对你有帮助。

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

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