overflow-wrap

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>They say the fishing is excellent at
Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>normal</code>)</p>

<p>They say the fishing is excellent at
Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>overflow-wrap: break-word</code>)</p>

<p>They say the fishing is excellent at
Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>word-break</code>)</p>



</body>
</html>

2. css

p {
width: 13em;
margin: 2px;
background: gold;
}

.ow-break-word {
overflow-wrap: break-word;
}

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


posted @ 2020-05-26 14:04  pascal1000  阅读(254)  评论(0编辑  收藏  举报