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/

Answer 1

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).

Answer 2

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

ex:

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

Works for me and Hope this helps :)

Answer 3

Use:

word-break: break-all;

And Ok!

Answer 4

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

hope this will help you

Answer 5

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

Answer 6

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;