Stretch text to fit width of div

by

This can be done with text-align:justify and a small hack. See here: 

div{
  background-color:gold;
  text-align:justify;
}

span{
  background-color:red;
  width:100%;
  height:1em;
  display:inline-block;
}
<div>
  Lorem ipsum sit dolor
  <span> </span>
</div>

The trick is to add an element after the text that pretends to be really long word. The fake word is actually a span element with display:inline-block and width:100%.

In my example the fake word is in red and given a height of 1em, but the hack will work even without it.

More Related Contents:

  1. How to place elements like this
  2. Vertically align an image inside a div with responsive height
  3. Vertically center two elements within a div [duplicate]
  4. How to keep origin in center of image in scale animation?
  5. Is there a CSS selector for the first direct child only?
  6. Remove white space above and below large text in an inline-block element
  7. Limit scope of external css to only a specific element?
  8. Why is a div with “display: table-cell;” not affected by margin?
  9. How to word wrap text in HTML?
  10. How to get box-shadow on left & right sides only
  11. Input with display:block is not a block, why not?
  12. Vertical align not working on inline-block
  13. Add padding at the beginning and end of each line of text
  14. CSS: Vertically align div when no fixed size of the div is known
  15. Flex item should align left, not center, when it wraps
  16. Why does my Transform snap back?
  17. Dynamically aligning pseudo element according to parent height
  18. Exclude menu item from the collapse of bootstrap 3 navbar
  19. Text Padding in Select Boxes
  20. CSS border color switch animation: “from” color not correct
  21. The border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  22. Pixelated edge around a CSS Circle with overflow: hidden;
  23. How to change font-family of drop down’s list item?
  24. CSS align images and text on same line
  25. Is there a `pointer-events:hoverOnly` or similar in CSS?
  26. sticky position on css grid items
  27. Load a low-res background image first, then a high-res one
  28. Can I use an image from my local file system as background in HTML? [duplicate]
  29. How to keep styles after animation?
  30. How to make Bootstrap cards the same height in card-columns?

Leave a Comment