css - CSS テキストの配置は大きなスペースを正当化します

Question

私が使用する段落をフォーマットするにtext-align:justifyは、単語間に大きなスペースがあるという1つの問題があります。IEの場合、解決策は を使用することtext-justify: distribute;ですが、Chromeはこれをサポートしていません。

大きなスペースの例: http://jsfiddle.net/L5drN/

Answer 1

ハイフネーション (手動、CSS、サーバー側、またはクライアント側の JavaScript) の使用を検討してください。たとえば、CSS を使用して行末にハイフンを使用してテキストを正当化できますか? への回答を参照してください。 ハイフネーションは、テキストに長い単語が含まれる場合に非常に役立ちます。

対応しているブラウザーでの結果を向上させることができるため、そのままにしておくことができます。また、CSS 標準化トラック ( CSS テキスト モジュール レベル 3 WD)text-justify: distributeのように、サポートを得ることが期待できます。

Answer 2

段落をどのようにフォーマットしますか? 幅、高さ、文字間隔、単語間隔のことですか?

text-align CSS タグを使用してみました か?

text-align:center

または単語間隔のCSS タグですか?

word-spacing:10px

Answer 3

最初に単語間の大きなスペースを取り除くための代替ソリューションがあり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;