Search code examples
htmlcssinlinebackground-colorword-break

How to get background-color to fill till the end of the line with box-decoration-break?

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

Solution

  • 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>