Css 简明教程

CSS - hyphenate-character Property

CSS hyphenate-character 属性允许你指定在使用 hyphens 属性对文本进行连字化时用来作为连字化点使用的字符。

CSS hyphenate-character property allows you to specify the character that should be used as the hyphenation point when text is hyphenated using the hyphens property.

当对文本进行连字化时，浏览器将在单词中的适当点插入连字号字符，以增进优化对齐文本的视觉观感。 hyphenate-character 属性允许你自定义连字化使用的字符。

When text is hyphenated, the browser will insert a hyphen character at appropriate points within words to improve the visual appearance of justified text. The hyphenate-character property allows you to customize the character used for hyphenation.

Possible Values

<string> − It is used as a <string> at the end of the line before a hyphenation break.
auto − Default value. The user-agent determines a suitable string based on the typographic conventions of the content language. Explicit setting is required to override an inherited value.

Applies To

所有元素。

All elements.

Syntax

hyphenate-character: <string> | auto;

它允许用连字号替换特定的字符串，并指示用户代理根据排版习惯选择合适的字符串（默认）。

It allows a specific string to replace with hyphen, and instructs the user agent to choose suitable string based on typographic conventions (default).

CSS hyphenate-character - auto Value

以下示例演示了 hyphenate-character: auto 属性允许在指定元素的内容中自动连字化 −

The following example demonstrates the hyphenate-character: auto property allowing automatic hyphenation in the content of the specified element −

<html>
<head>
<style>
   div {
      width: 80px;
      border: 2px solid blue;
      hyphens: auto;
      hyphenate-character: auto;
   }
</style>
</head>
<body>
   <div>CSS hyphenatecharacter auto</div>
</body>
</html>

CSS hyphenate-character - <string> Value

以下示例演示了 hyphenate-character 属性，其中不同的连字符显示连字符行为的不同效果 −

The following example demonstrates the hyphenate-character property, with different hyphenation characters showing the different effects of the hyphenation behavior −

<html>
<head>
<style>
   div {
      width: 80px;
      border: 2px solid blue;
      hyphens: auto;
   }
   .box1 {
      hyphenate-character: "=";
   }
   .box2 {
      hyphenate-character: "*";
   }
   .box3 {
      hyphenate-character: "%";
   }
</style>
</head>
<body>
   <h3>hyphenate-character: "="</h3>
   <div class="box1">CSS hyphenatecharacter auto</div>
   <h3>hyphenate-character: "*"</h3>
   <div class="box2">CSS hyphenatecharacter auto</div>
   <h3>hyphenate-character: "%"</h3>
   <div class="box3">CSS hyphenatecharacter auto</div>
</body>
</html>