CSS text align justify big spaces

Question

To format paragraphs I use text-align:justify, but I have one problem that there are big spaces between words, for IE the solution is to use text-justify: distribute;, but Chrome doesn't support this, my question is what should I use for Chrome and Firefox

Example of big spaces: http://jsfiddle.net/L5drN/

score 47 · Answer 1 · edited Dec 30 '13 at 15:21

47

Give negative values as you prefer for word-spacing..

ex:

text-align:justify;
word-spacing:-2px;

Works for me and Hope this helps :)

edited Dec 30 '13 at 15:21

Imane Fateh

2,418
3
19
23

answered Dec 30 '13 at 15:03

Laksh

485
4
5

This should be the top answer. – Barbz_YHOOL Jul 21 '19 at 15:12
5

Unfortunately it works partially, it does not work for all lines, some lines maintain large spaces. – LuizEduardoMPF Oct 25 '20 at 22:17

score 24 · Answer 2 · answered Feb 02 '17 at 15:28

24

Use:

word-break: break-all;

And Ok!

answered Feb 02 '17 at 15:28

Giovanny Gonzalez

762
6
9

2

Using this with `text-align: justify;` worked for me – Malinda May 31 '20 at 12:59
In my case (there is a text in a paragraph) this will break the words. Not so good for the continous reading. – Andras Barth Mar 17 '23 at 12:14

score 9 · Accepted Answer · edited May 23 '17 at 10:31

9

Consider using hyphenation (manual, CSS, server-side, or client-side JavaScript), see e.g. answers to Can I use CSS to justify text with hyphenating words at the end of a line? Hyphenation tends to help a lot when there are long words in the text.

You can still keep text-justify: distribute, as it can improve the result on supporting browsers, and it can be expected to gain support, as it in the CSS standardization track (in CSS Text Module Level 3 WD).

edited May 23 '17 at 10:31

Community

1
1

answered Feb 27 '13 at 18:50

Jukka K. Korpela

195,524
37
270
390

Thank's, but I steel have problem width Chrome – Wizard Feb 27 '13 at 19:12
1

Chrome does not do hyphenation yet, so for Chrome, you are limited to the other options. Hyphenator.js seems hyphenate Lithuanian OK; demo: http://www.cs.tut.fi/~jkorpela/js/hyphlt.html8 – Jukka K. Korpela Feb 27 '13 at 20:34

score 6 · Answer 4 · answered Mar 10 '19 at 11:11

6

text-align: justify;
text-justify: distribute;
text-align-last: left;

hope this will help you

answered Mar 10 '19 at 11:11

Anoop P S

754
1
12
31

circular · Answer 5 · 2022-05-08T11:20:02.647

I got something satisfying by combining both methods:

enable hyphens (using two variants for compatibility)
negative word spacing (no more than -0.05em otherwise text get condensed)

div.justify {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-spacing: -0.05em;
}

div.font {
    font-size: 110%;
}

<div class="justify font">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available. It is also used to temporarily replace text in a process called greeking, which allows designers to consider the form of a webpage or publication, without the meaning of the text influencing the design.</div>

score 1 · Answer 6 · answered Jun 02 '23 at 14:13

1

hyphens: auto;
text-align: justify;
word-spacing: -0.5px;

Add these three lines to your text field css rule and see, while it may not give you perfect result, it will surley come close to what you're trying to achieve.

answered Jun 02 '23 at 14:13

Ashutosh Baitharu

41
5

score 0 · Answer 7 · edited Jul 21 '16 at 03:37

0

How do you want to format the paragraphs? Do you mean the width, height, letter spacing or word spacing?

Have you tried using the text-align CSS tag?

text-align:center

Or the word-spacing CSS tag?

word-spacing:10px

edited Jul 21 '16 at 03:37

fzzylogic

2,183
1
19
25

answered Feb 27 '13 at 17:48

Adam Brown

2,812
4
28
39

2

He's using text-align:justify – Chris Bier Feb 27 '13 at 17:51
I'm about that space between words are not same 1 is biggest that 2 – Wizard Feb 27 '13 at 17:51
1

@Lopezito Perhaps try using the CSS word spacing property then. It defines the spaces between words. https://developer.mozilla.org/en-US/docs/CSS/word-spacing – Adam Brown Feb 27 '13 at 17:59
2

Those aren't "CSS tags"! They're CSS Properties – Vahid Nov 14 '19 at 09:50

score 0 · Answer 8 · answered Jun 18 '23 at 17:37

0

I don't know how anyone didn't think of this but this worked for me.

text-align: start;

answered Jun 18 '23 at 17:37

Avi

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 19 '23 at 15:02

score -1 · Answer 9 · edited Oct 27 '20 at 14:35

I have an alternate solution to get rid of the big spacing between word first you should know one thing that text-align:justify is used only when you are rendering your text component on wider screen so in my case I was using it on card custom component so I simply increase the width of my card component and this helps me hope it will help you to.

Card.js

import React from 'react';
import styles from './Card.module.css'

const Card = (props) => {
    return (
        <div className={styles.card}>
            {props.children}
        </div>
    );
} ;


export default Card;

Card.module.css

.card {
          height: 30rem;
          width: 25rem;
          margin: 0 20px 10rem;
          text-align: justify;
         
    

}

Calling card component in HOC

import React, { useEffect, useState } from "react";
import projectStyles from "./project.module.css";
import Card from "../UX/Card";
import axios from "axios";

const Project = () => {
  const [loadedProjects, setLoadedUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const responseData = await axios("api/projects");

        setLoadedUsers(responseData.data.projects);
      } catch (err) {}
    };
    fetchUsers();
  }, []);

  const displayHandler = (
    <div className={projectStyles.projectHolder}>
      {loadedProjects.map((project,index) => {
        return (
          <Card key={index}>
            <img src={project.image} alt="project" height={225} width={345}  style={{marginBottom:"20px"}}/>
            <p style={{fontSize:'25px' , fontWeight:'bold'}}>{project.title}</p>
            <p className={projectStyles.body}>{project.info}</p>
            <h4>Technologies Used</h4>
            <ul key={project.image}>
              {project.technology.map((tech) => {
                return <li key={tech}>{tech}</li>;
              })}
            </ul>
          </Card>
        );
      })}
    </div>
  );

  return <div>{loadedProjects ? displayHandler : 'Fetching Projects...'}</div>;
};

export default Project;

CSS text align justify big spaces

9 Answers9

Linked

Related