How to use css to break letters when they are less than one line-CSS Tutorial-php.cn

How to use css to break letters when they are less than one line

WBOY

Release： 2021-11-15 15:30:43

Original

2437 people have browsed it

How to wrap css letters less than one line: 1. Add the "word-break:break-word;" style to the element to make it wrap in units of words; 2. Add "word-break" to the element :break-all;" style to break lines in letter units.

How to use css to break letters when they are less than one line

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to wrap css letters when they are less than one line long

Open an HTML code page, create two div tags and enter an English sentence. Set two css styles: automatic line wrapping by letters and automatic line wrapping by words.

word-break:break-word;//表示以单词为单位换行，
word-break:break-all;//表示以字母为单位换行。

Copy after login

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .aa{
        width:150px;
        word-break:break-word;
    }
    .bb{
        width:150px;
        word-break:break-all;
    }
    </style>
</head>
<body>
    <div class="aa">When summer comes, unlike most people, I will be very excited, because I like summer very much. People don’t like summer because of its hot weather, which makes people sweat all the time. But summer is my favorite season, I can wear fewer clothes. I like to wear short jeans and a T-shirt, I feel so free.</div>
    <div class="bb">When summer comes, unlike most people, I will be very excited, because I like summer very much. People don’t like summer because of its hot weather, which makes people sweat all the time. But summer is my favorite season, I can wear fewer clothes. I like to wear short jeans and a T-shirt, I feel so free.</div>
</body>
</html>

Copy after login

Output result:

How to use css to break letters when they are less than one line

The above is Two different ways of wrapping.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of How to use css to break letters when they are less than one line. For more information, please follow other related articles on the PHP Chinese website!