Menu
If I am using text-align:justify
paragraph shows unwanted space between words to maintain specified width. Searched in internet but didn't get any proper result. I used white-space also but no use
fiddle :fiddle
574
If you ever come across these problems, the best way to find the solution is by Inspect Element. Here when you do this you will be able to see there is a default margin. So for getting rid of this, go to your CSS file and make the margin: 0; This should help.
In this CSS word-spacing example, we have removed 3px of space between the words by setting a -3px value for the word-spacing property. This removes some of the word spacing that has been added by the selected font.
The text is justified by adding space between characters (effectively varying letter-spacing ), which is most appropriate for languages like Japanese. Exhibits the same behavior as inter-character ; this value is kept for backwards compatibility.
The text-justify property in CSS is used to set the text-align to justify. It spreads the words into the complete line.
The closest solution would be using word-break: break-all but this will also break words. If you are ok with this then go with this solution:
.sample_test p{
word-break: break-all;
}
Fiddle
Edit (Nov, 2021)
Other closest better solution is using hyphens: auto. We have to mention the global attribute lang to the HTML element to make this work:
.sample_test {
display: block;
margin: 0 auto;
width: 400px;
height: auto;
}
.sample_test p {
/* word-break: break-all; */
hyphens: auto;
}<div class="sample_test" lang="en">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it.</p>
<p>Contrary to popular belief,.. It has roots in a piece of classical Latin literature from 45 BC,</p>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary
of over 200 Latin words,</p>
</div>When you are using text-align: justify, you are asking browsers to add spacing, and browsers implement this as added spacing between words. According to CSS Text Module Level 3 LC, you could additionally use text-justify: distribute to ask browsers to use added spacing both between words and between characters in words, to achieve a more balanced result, but it is debatable whether the results are really better, and this feature has been implemented only in IE (long ago).
What you can do to improve the situation is to use hyphenation. This generally reduces the need for added spacing, though of course it cannot remove it. The most effective way is to use Hyphenator.js, which means that you need to declare the language of your page, e.g. <html lang=en>, to set the hyphenate class on any elements where text should be hyphenated, e.g. with <body class=hyphenate> to hyphenate everything, and to just add the code
<script src=http://hyphenator.googlecode.com/svn/tags/Version%204.2.0/Hyphenator.js></script>
<script>Hyphenator.run();</script>
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
