根据您的喜好为字间距给予负值。
例如：

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

对我有用，希望这对我有帮助：）

用途：
word-break：break-all;
OK！

考虑使用连字符（手动，CSS，服务器端或客户端JavaScript），参见例如。答案Can I use CSS to justify text with hyphenating words at the end of a line?断字往往有很大的帮助时，有很长的话在文本中。
您仍然可以保留text-justify: distribute，因为它可以改善支持浏览器的结果，并且可以期望获得支持，因为它在CSS标准化轨道中（在CSS Text Module Level 3 WD中）。

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

我希望这对你有帮助

我通过结合这两种方法得到了令人满意的结果：

• 启用连字符（使用两个变体以实现兼容性）
• 负字间距（不超过-0.05em，否则文本会被压缩）

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 CSS标签吗？

text-align:center

还是 word-spacing CSS标签？

word-spacing:10px

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

将这三行添加到你的文本字段css规则中，你可以看到，虽然它可能不会给予你完美的结果，但它会接近你想要达到的目标。

我有一个替代的解决方案，以摆脱字之间的大间距，首先你应该知道一件事，text-align:justify是只使用当你渲染你的文本组件在更宽的屏幕上，所以在我的情况下，我用它对卡自定义组件，所以我只是增加我的卡组件的宽度，这有助于我希望它会帮助你。

卡片.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;

卡片.module.css

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

}

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;