问题描述
我要实现的是有一组动态生成的长文本,它们位于“气泡”中,如果文本到达该行的末尾,它将分解为一个新文本(可以位于单词的中间)和一个新的,直到它结束。我想我几乎正确,这是代码:
<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等内联元素的情况下可以正常工作。
谢谢
解决方法
您可以使用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>