CSS文本对齐两端对齐大间距

Question

为了格式化段落，我使用text-align:justify，但我有一个问题是单词之间有很大的空格。对于IE，解决方法是使用text-justify:distribute;，但是Chrome不支持这个属性。我的问题是在Chrome和Firefox中应该使用什么。

大空格的示例：http://jsfiddle.net/L5drN/

- Wizard

Answer 1

根据您的喜好，将负值用于单词间距。

例如：

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

适合我，希望这能帮到你 :)

- Laksh

---

这应该是最佳答案。 - Barbz_YHOOL

很遗憾，它只能部分起作用，它不能作用于所有行，一些行仍然保持很大的空格。 - LuizEduardoMPF

Answer 2

使用：

word-break: break-all;

完成！

- Giovanny Gonzalez

---

使用 text-align: justify; 配合此方法对我有效。 - Malinda

在我的情况下（段落中有一些文本），这将打断单词。对于连续阅读来说不是很好。 - Andras Barth

Answer 3

考虑使用连字号（手动、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中）。

- Jukka K. Korpela

---

谢谢，但我仍然在Chrome上遇到问题。 - Wizard

Chrome目前还不支持断字功能，因此在Chrome中，您只能使用其他选项。Hyphenator.js似乎可以很好地对立陶宛语进行断字处理；演示链接：http://www.cs.tut.fi/~jkorpela/js/hyphlt.html8 - Jukka K. Korpela

Answer 4

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

• 启用连字符（使用两个变体以保证兼容性）
• 负字间距（不超过-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>

- circular

Answer 5

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

希望这会对您有所帮助。

- Anoop P S

Answer 6

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

将以下三行代码添加到您的文本字段 CSS 规则中，虽然可能无法完美实现您想要达到的效果，但肯定会接近。

- Ashutosh Baitharu

Answer 7

我不知道为什么没有人想到这个，但这对我起作用了。

text-align: start;

- Avi

---

你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人能够确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community

Answer 8

你想如何格式化段落？你是指宽度、高度、字母间距还是单词间距？

你尝试过使用CSS标签text-align吗？

text-align:center

还是 word-spacing CSS 标签呢？

word-spacing:10px

- Adam Brown

---

他正在使用text-align:justify。 - Chris Bier

我正在处理单词之间不同的空格，其中一个比另一个大。 - Wizard

@Lopezito 或许可以尝试使用 CSS 的 word-spacing 属性。它定义了单词之间的间距。https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-spacing - Adam Brown

那些不是“CSS标签”！它们是CSS属性。 - Vahid

Answer 9

我有一个替代方案来消除单词之间的大间距。首先，您应该知道text-align:justify仅在您将文本组件呈现在更宽屏幕上时使用，所以在我的情况下，我正在使用它在卡片自定义组件上，因此我只需增加我的卡片组件的宽度，这有助于我，希望它也能帮助到您。

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;
         
    

}

高阶组件中的名片组件

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;

- Govind Kumar Thakur