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;
    width: 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;
}


posted @   pascal1000  阅读(171)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示