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:
Give negative values as you prefer for word-spacing..
ex:
text-align:justify;
word-spacing:-2px;
Works for me and Hope this helps :)
text-align: justify;
text-justify: distribute;
text-align-last: left;
hope this will help you
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;
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).
Use:
word-break: break-all;
And Ok!
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