Justify short lines with CSS

Question

I would like to justify a very short line with CSS. With text-align: justify;, it does not work. Is there another way to do this?

body {
  margin: 0;
  padding: 0;
  width: 50%;
}

.justify {
  font-family: Arial;
  font-size: 30px;
  width: 100%;
  border: 1px solid red;
  padding: 10px;
  color: red;
  text-align: justify;
}

<div class="justify">Justify this text</div>

Would be thankful for help. :)

Temani Afif · Accepted Answer · 2020-06-06T21:40:07.800

use text-align-last: justify; instead

body {
  margin: 0;
  padding: 0;
  width: 50%;
}

.justify {
  font-family: Arial;
  font-size: 30px;
  width: 100%;
  border: 1px solid red;
  padding: 10px;
  color: red;    
  text-align-last: justify;
}

<div class="justify">Justify this text</div>

Or the pseudo element hack if the above isn't supported:

body {
  margin: 0;
  padding: 0;
  width: 50%;
}

.justify {
  font-family: Arial;
  font-size: 30px;
  width: 100%;
  border: 1px solid red;
  padding: 10px;
  color: red;    
  text-align: justify;
  height: 1.2em;
}
.justify::after {
  content:"";
  display:inline-block;
  width:100%;
}

<div class="justify">Justify this text</div>

Justify short lines with CSS

1 Answers1