Wrap text on many lines

Question

I have a text over many lines. Example:

Can the text be adapted to the div?

In this example, after the word "text" there is a space with color blue. In CSS there is a method to avoid the blue space after the word "text"?

If I have several texts with different lengths, is there a way to generalize this behavior?

.box {
  border: 1px solid red;
  width: 200px;
  position: relative;
  padding-top: 40px;
}

.label {
  position: absolute;
  top: -10px;
  background-color: blue;
}

<h1>My First Heading</h1>

<div class="box">
  I'm a box.
  <div class="label">
    I'm a label without a text wrapped.
  </div>
</div>

cursorrux · Answer 1 · 2021-09-18T08:25:28.800

1

To avoid space after text and align it property to both side, use text-align css property.

.box {
  border: 1px solid red;
  width: 200px;
  position: relative;
  padding-top: 40px;
}
.label {
  position: absolute;
  top: -10px;
  background-color: blue;
  text-align: justify;
}

<h1>My First Heading</h1>

<div class="box">
    I'm a box.
    <div class="label">
        I'm a label without a text wrapped.
    </div>
</div>

edited Sep 18 '21 at 08:25

answered Sep 17 '21 at 16:00

cursorrux

1,382
4
9
20

I cannot justify the text – ocram88 Sep 17 '21 at 16:03
You could also use `word-break` to avoid blue space – cursorrux Sep 17 '21 at 16:14

score 0 · Answer 2 · answered Sep 17 '21 at 16:03

0

you could use a margin-right: <unit of measument>; in order to remove the excess blue though this would not be very responsive if the size of that box is going to change.

answered Sep 17 '21 at 16:03

AlignSD

21
1
7

If I have several texts of different lengths, is there a way to generalize this behavior? – ocram88 Sep 17 '21 at 16:08
I'm not sure that there is to be honest. Seems like such a trivial thing to. – AlignSD Sep 17 '21 at 16:56

Wrap text on many lines

2 Answers2