19

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

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

4

6 回答 6

45

为单词间距提供您喜欢的负值..

前任：

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

对我有用，希望这会有所帮助:)

于 2013-12-30T15:03:20.203 回答
21

采用：

断词：打破一切；

好的！

于 2017-02-02T15:28:36.353 回答
8

考虑使用连字符（手动、CSS、服务器端或客户端 JavaScript），请参阅Can I use CSS to justify text with hyphenating words in a line? 当文本中有长词时，连字符往往会很有帮助。

您仍然可以保留text-justify: distribute，因为它可以改善支持浏览器的结果，并且可以预期它会获得支持，就像它在 CSS 标准化轨道（在CSS Text Module Level 3 WD 中）一样。

于 2013-02-27T18:50:57.653 回答
4 
text-align: justify;
text-justify: distribute;
text-align-last: left;

希望对你有帮助

于 2019-03-10T11:11:18.840 回答
0

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

您是否尝试过使用 text-align CSS 标签？

text-align:center

还是字间距CSS 标记？

word-spacing:10px
于 2013-02-27T17:48:20.547 回答
-1

我有一个替代解决方案可以首先消除单词之间的大间距，您应该知道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;
         
    

}

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;
于 2020-10-27T02:45:45.183 回答