Avoiding big spaces in fully justified text

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

ex:

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

Works for me and Hope this helps :)

Use:

word-break: break-all;

And Ok!

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>

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

hope this will help you

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.

what worked for me was adjusting the font-size

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

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;

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

text-align: start;