Hướng dẫn how do i get rid of extra space between text in css? - làm cách nào để loại bỏ khoảng cách thừa giữa văn bản trong css?

Tôi đang sử dụng HTML/CSS và văn bản-Align: Justify; Khi tôi sử dụng văn bản bên dưới dòng thứ 2 có khoảng cách lớn giữa các từ. Phần còn lại của những thứ là tốt.

<p style="text-align: justify;">Lorem Ipsum is simply dummy text of the <a href="http://example.com"> example </a>and Lorem Ipsum is simply dummy text of the lorem. I'm also printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic </p>

Tôi đang nhận được nhiều không gian bổ sung giữa mỗi từ trong dòng thứ 2 này. Tôi sửa nó như thế nào? Như thế này:

    Lorem Ipsum is simply dummy text of the Lorem Lorem Lorem Lorem Lorem 
    text   of    the   lorem.   I'm   also   printing   and    typesetting     industry.   
    Lorem Ipsum has been

Các

Hỏi ngày 12 tháng 10 năm 2017 lúc 20:33Oct 12, 2017 at 20:33

Hướng dẫn how do i get rid of extra space between text in css? - làm cách nào để loại bỏ khoảng cách thừa giữa văn bản trong css?

2

text-align: justify; trải ra một dòng để đảm bảo không có khoảng cách ở cuối của nó. Để làm điều này, nó phải thêm không gian ở giữa.

Nếu bạn không muốn điều này, đừng làm text-align: justify;, hoặc cho chúng tôi biết bạn muốn nó làm gì? Có lẽ bạn muốn text-align: left?

:)

Đã trả lời ngày 12 tháng 10 năm 2017 lúc 20:37Oct 12, 2017 at 20:37

MaxmaxMax

1.3059 huy hiệu bạc20 Huy hiệu đồng9 silver badges20 bronze badges

1

<html>
<head>
<style>
p.b { 
  word-spacing: -3px;
}
</style>
</head>
<body>
<p>This is some text. This is some text.</p>
<p class="b">This is some text. This is some text.</p>
</body>
</html>

Đã trả lời ngày 7 tháng 9 năm 2021 lúc 7:46Sep 7, 2021 at 7:46

Hướng dẫn how do i get rid of extra space between text in css? - làm cách nào để loại bỏ khoảng cách thừa giữa văn bản trong css?

Chủ đề: HTML / CSSPREV | Tiếp theoPrev|Next

Trả lời: Xóa không gian giữa các yếu tố

Thuộc tính CSS display có giá trị inline-block rất hữu ích để kiểm soát các kích thước cũng như ____10 và

    Lorem Ipsum is simply dummy text of the Lorem Lorem Lorem Lorem Lorem 
    text   of    the   lorem.   I'm   also   printing   and    typesetting     industry.   
    Lorem Ipsum has been
1 của các phần tử nội tuyến.

Tuy nhiên, trong khi sử dụng

    Lorem Ipsum is simply dummy text of the Lorem Lorem Lorem Lorem Lorem 
    text   of    the   lorem.   I'm   also   printing   and    typesetting     industry.   
    Lorem Ipsum has been
2, khoảng trắng trong mã HTML tạo ra một số không gian trực quan trên màn hình. Nhưng bạn có thể thoát khỏi nó bằng các kỹ thuật đơn giản sau đây.

Giải pháp 1: Xóa không gian giữa các yếu tố

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing Extra Space Between the Elements</title>
<style>
    ul {
        padding: 0;
        list-style: none;
    }
    ul li {
        display: inline-block;
        background: #ffa500;
        padding: 5px 20px;
    }
</style>
</head>
<body>
    <h2>Normal Behavior</h2>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <hr>
    <h2>After Removing Spaces</h2>
    <ul>
        <li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li>
    </ul>
</body>
</html>

Giải pháp 2: Đặt kích thước phông chữ không trên phần tử cha mẹ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting Zero Font-size on Parent Element</title>
<style>
    ul {
        padding: 0;
        list-style: none;
        font-size: 0;
    }
    ul li {
        font-size: 16px;
        display: inline-block;
        background: orange;
        padding: 5px 20px;
    }
</style>
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</body>
</html>

Bạn cũng có thể sử dụng biên độ âm của 4 pixel như

    Lorem Ipsum is simply dummy text of the Lorem Lorem Lorem Lorem Lorem 
    text   of    the   lorem.   I'm   also   printing   and    typesetting     industry.   
    Lorem Ipsum has been
3 trên các phần tử khối nội tuyến để khắc phục vấn đề này, tuy nhiên hai phương pháp trên đơn giản hơn.


Câu hỏi thường gặp liên quan

Dưới đây là một số Câu hỏi thường gặp liên quan đến chủ đề này:

  • Cách loại bỏ khoảng trắng bên dưới hình ảnh bằng CSS
  • Cách xóa đường chấm xung quanh các liên kết bằng CSS
  • Cách loại bỏ các tế bào khỏi các bảng bằng CSS