how to remove white space in justified css

html css whitespace

13,832

Solution 1

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>

Solution 2

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>

13,832

Author by

Sebin Simon

Proficient in using languages like HTML-5, CSS3, Javascript, React Js, Nuxt JS, Vue Js, TypeScript, jQuery, SCSS, Jade, Twigg, PHP, MySql. which was extensively used in the projects that I have worked on. I am an able learner and can do any type of task using new and latest web technologies.

Updated on June 04, 2022

Comments

Sebin Simon about 2 years

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