How to get background-color to fill till the end of the line with box-decoration-break?
Question
What I want to achieve is have a set of dynamically generated long texts that are in a "bubble", and if the text reaches the end of the line, it breaks to a new one(can be middle of the word) and a new one until it ends. I almost have it right I think, here is the code:
<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>
The background color should fill till the end of the grey block. Sadly it seems that the line break always happens before the end of the parent(only by little) and so there is a little gap and it looks bad.
I found box-decoration-break: slice only works correctly in my case with inline element like span.
Thanks
1 answers
solution1
0 ACCPTED 2020-08-11 19:33:24
You can fix this using 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.