Question 222865 in CSS Question posted in
Some basic documentation can be found here.

Css – Text-align: justify

I’m facing an issue with the text align it’s not working probably , there is too much space between letters as per below screenshot. any advice on how to fix that ?

Screenshot of the issue

I’m using the following style:

Text-align: Justify.

Tags:

3

Answers


  1. 0

    You can influence it a little with word-spacing:

    div {
  margin: 1rem;
  width: 250px;
  text-align: justify;
}

.block-2 {
  word-spacing: -2px;
}
    <div class="block-1">Proin mollis erat sodales arcu hendrerit, at dapibus urna convallis. Phasellus quis bibendum urna, sed dignissim leo. Duis at blandit purus.</div>

<div class="block-2">Proin mollis erat sodales arcu hendrerit, at dapibus urna convallis. Phasellus quis bibendum urna, sed dignissim leo. Duis at blandit purus.</div>
    Login or Signup to reply.
  2. 0

    This is the task of justify.
    The common denominator here is the next word after the line with large spacing, where this is a long word.

    What justify will do is to set every row to 100% of its container and justify the space between each word.
    The choices you have for text-align will be left, right, center and justify.

    You will need to be using some of the other choices here to fix the "issue" you are referring to.

    You could also hyphen words if you want to.

    Login or Signup to reply.
  3. 0

    The other two answers are completely right.

    But there is another approach:
    You could use &shy; for long words (eg autho&shy;rity) so the space is equally distributed. The css-rule hyphen does this automatically but you need to distribute the lang-attribute in your -Tag (<html lang="en">) More information how to use that rule, can be found here: Stack Overflow: css break word with hyphen

    Alternative just use text-align: left, personally I’m not a fan of block-text 😉

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search