Menu
I have a div element that holds one line of text. How can I get this text to fill the width 100%?
text-align:justify is only working on elements with several lines of text, and has no effect on the div with single line. Manually adjusting the letter-spacing and word-spacing is ugly and ineffective.
Are there any other alternatives?
574
If you want to limit the text length to one line, you can clip the line, display an ellipsis or a custom string. All these can be done with the CSS text-overflow property, which determines how the overflowed content must be signalled to the user.
Just had to add text-justify: inter-character; to my styles, to have all chars across the full container width.
If you set the width to 100% on the body element you will have a full page width. This is essentially equivalent to not setting a width value and allowing the default. If you want to use the body element as a smaller container and let the HTML element fill the page, you could set a max-width value on the body.
Using inline-block property: Use display: inline-block property to set a div size according to its content.
Try this:
div { text-align: justify; } div:after { content: ""; display: inline-block; width: 100%; } jsFiddle
Take a look here for more info.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
