word-break

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="Overflowing_content.css">
    <title>Title</title>
</head>
<body>


<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">This is a long and
    Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
    グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">This is a long and
    Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
    グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>

<p>4. <code>word-break: break-word</code></p>
<p class="breakWord narrow">This is a long and
    Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
    グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>

</body>
</html>


2.css

.narrow {
    padding: 10px;
    border: 1px solid;
     500px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 1px;
}

.normal {
    word-break: normal;
}

.breakAll {
    word-break: break-all;
}

.breakWord {
    word-break: break-word;
}

相关推荐