如何使用 box-decoration-break 填充背景颜色直到行尾？

Question

我想要实现的是有一组动态生成的长文本，它们处于“气泡”中，如果文本到达行尾，它会中断一个新的（可以是单词的中间）和一个新的一个直到结束。 我想我几乎是对的，这是代码：

<head>
<style>
div {
    background-color: grey;
    width: 300px;
    height: 300px;
    padding-top: 10px;
}
span {
    padding: 5px;
    margin: 5px;
    color: white;
    background-color: teal;
    box-decoration-break: slice;
    word-break: break-all;
    border-radius: 10px;
    line-height: 2;
}
</style>
</head>
<div>
<span>
  DSFDSDFDSFGSD FSDFSDFSDFSD FSDFSDFDSFSDFSDFSDFSD FDSDFSDFSDFSD dfasfsdfsdfsdfsdfsd fdsfsdfsdfsdfdsfs fsdfsdfsdfsdfds fdsfsdfsdf
</span>
</div>

 div { background-color: grey; width: 300px; height: 300px; padding-top: 10px; } span { padding: 5px; margin: 5px; color: white; background-color: teal; box-decoration-break: slice; word-break: break-all; border-radius: 10px; line-height: 2; }

 <div> <span> DSFDSDFDSFGSD FSDFSDFSDFSD FSDFSDFDSFSDFSDFSDFSD FDSDFSDFSDFSD dfasfsdfsdfsdfsdfsd fdsfsdfsdfsdfdsfs fsdfsdfsdfsdfds fdsfsdfsdf </span> </div>

背景颜色应填充到灰色块的末尾。 可悲的是，似乎换行总是发生在父母结束之前（只是一点点），所以有一点差距，看起来很糟糕。

我发现box-decoration-break: slice仅在我的情况下使用像 span 这样的内联元素才能正常工作。

谢谢

Answer 1

您可以使用text-align: justify;

 div { background-color: grey; width: 300px; height: 300px; padding-top: 10px; text-align: justify; } span { padding: 5px; margin: 5px; color: white; background-color: teal; box-decoration-break: slice; word-break: break-all; border-radius: 10px; line-height: 2; }

 <div> <span> DSFDSDFDSFGSD FSDFSDFSDFSD FSDFSDFDSFSDFSDFSDFSD FDSDFSDFSDFSD dfasfsdfsdfsdfsdfsd fdsfsdfsdfsdfdsfs fsdfsdfsdfsdfds fdsfsdfsdf </span> </div>

如何使用 box-decoration-break 填充背景颜色直到行尾？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-08-11 19:33:24

如何使用 box-decoration-break 填充背景颜色直到行尾？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-08-11 19:33:24

解决方案1
0 已采纳 2020-08-11 19:33:24