CODEWITHSUNDEEP
cssjustify
Wizard
Wizard

Reputation: 11265

CSS text align justify big spaces

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/

Upvotes: 25

Views: 96435

Answers (9)

Avi
Avi

Reputation: 1

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

text-align: start;

Upvotes: 0

Ashutosh Baitharu
Ashutosh Baitharu

Reputation: 81

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.

Upvotes: 4

circular
circular

Reputation: 301

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>

Upvotes: 7

Govind Kumar Thakur
Govind Kumar Thakur

Reputation: 629

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;

Upvotes: -1

Anoop P S
Anoop P S

Reputation: 782

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

hope this will help you

Upvotes: 6

Giovanny Gonzalez
Giovanny Gonzalez

Reputation: 809

Use:

word-break: break-all;

And Ok!

Upvotes: 27

Adam Brown
Adam Brown

Reputation: 2870

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

Upvotes: 0

Laksh
Laksh

Reputation: 505

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

ex: 

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

Works for me and Hope this helps :)

Upvotes: 49

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201518

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

Upvotes: 9

Related Questions