CSS text align justify big spaces

前端 未结 6 1296
时光取名叫无心
时光取名叫无心 2020-12-01 10:55

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:

相关标签:
6条回答
  • 2020-12-01 11:33

    Give negative values as you prefer for word-spacing..

    ex:

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

    Works for me and Hope this helps :)

    0 讨论(0)
  • 2020-12-01 11:33
    text-align: justify;
    text-justify: distribute;
    text-align-last: left;
    

    hope this will help you

    0 讨论(0)
  • 2020-12-01 11:35

    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;
    
    0 讨论(0)
  • 2020-12-01 11:37

    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).

    0 讨论(0)
  • 2020-12-01 11:38

    Use:

    word-break: break-all;

    And Ok!

    0 讨论(0)
  • 2020-12-01 11:59

    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
    
    0 讨论(0)
提交回复
热议问题