使用 CSS hyphens 属性在文本中添加连字符

cssweb developmentfront end technology更新于 2024/8/29 20:28:17

使用 CSS hyphens 属性，我们可以指定在文本中添加连字符的方式。

示例

以下示例演示了 CSS hyphens 属性。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   width: 20%;
   border: 2px groove lime;
   margin: 10px;
   padding: 10px;
   hyphens: none;
   -webkit-hyphens: none;
   -ms-hyphens: none;
}
div:last-of-type {
   hyphens: manual;
   -webkit-hyphens: manual;
   -ms-hyphens: manual;
}
</style>
</head>
<body>
<div>
abcdefghijklmnopqrstuvwxyz
</div>
<div>
abcdefghijklmnopqrstuvwxyz
</div>
</body>
</html>

输出

这将产生以下结果 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 10px;
   padding: 10px;
   width: 15%;
   border: 2px ridge darkblue;
   background-color: peachpuff;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}
</style>
</head>
<body>
<div>
abcdefghijklmno-pqrstuvw-xyz
</div>
<div>
abcdefghi-jklmnopqrstuvw-xyz
</div>
</body>
</html>