0

I have this picture.

enter image description here

Is this possible in CSS?

Now I know you can use text-align: center and I could even make every line a span and incrementally increase the padding but is there a property I don't know about like centre from centre, or something similar?

This feels really obvious but I just can't think of a reasonable approach.

Update

The question was because in the picture the text tends to get shorter towards the bottom, much like the letter V, so t starts off wide and gets progressively narrower.

I had never seen a similar thing done so was very curious.

3

3 Answers 3

5

shape-outside can do it:

.wrapper {
  display:flex; /* this is needed for the percentage height */
}

.box {
  font-size: 25px;
  text-align:justify;
}

.box > div,
.box::before{
  height:150%; /* should be at least 100% but we consider bigger to avoid overflow */
  width:100px; /* adjust this */
}
  
.box > div {
  float:right;
  shape-outside:linear-gradient(to bottom right,#0000 50%,#000 0);
}
.box::before {
  content:"";
  float:left;
  shape-outside:linear-gradient(to bottom left,#0000 50%,#000 0);
}

/* the below is not need, it's only to illustrate the shape 
   uncomment it to see what is happening
.box > div {
  background:linear-gradient(to bottom right,#0000 50%,red 0);
}
.box::before {
  background:linear-gradient(to bottom left,#0000 50%,green 0);
}
*/
<div class="wrapper">
  <div class="box">
    <div></div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pretium lacus ipsum, at placerat nunc sollicitudin scelerisque. Donec vulputate ex odio, et facilisis nisi tristique et. Maecenas tortor nisi, euismod et tellus sit amet, tincidunt congue
    eros. Nam et viverra magna, id ultricies augue.
  </div>
</div>

2

White-space: break-spaces.

With appropriate width you will get this:

#text {
  font-family:sans-serif;
  padding:10px;
  text-align: center;
  width: 600px;
  white-space: break-spaces;
  background-color:gray;
  color: silver;
}
<div id="text">“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales ultrices nibh
at bibendum. Vivamus in volutpat diam. Vivamus ut mi non leo vehicula mattis.
Maecenas nec dolor id tellus consequat laoreet nec sit amet lacus.”

Jane from Cool Business Ltd</div>

-2

Just apply text-align:center on the parent div.

Like this:

<div style='text-align:center'>
   Your<br>
   Multiline<br>
   Text<br>
</div>
1
  • OP: I know you can use text-align: center
    – mplungjan
    Commented Apr 23, 2021 at 11:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.