效果字体_经典字体效果：连字

效果字体

Automatically breaking whole words at the ends of lines within syllable junctions is a very useful feature for web pages, especially when applied to narrow columns of fully justified text, content inside small table cells, or columns of text that may narrow due to being part of a responsive or fluid design. Hyphenation allows more text to fit on each line, saving screen real estate, and helps avoid the “rivers of white” optical phenomenon created by wide spaces between words.

对于网页而言，自动将整个音节连接处的行尾的整个单词断行是非常有用的功能，尤其是当应用于完全对齐的文本的狭窄列，小表格单元格中的内容或由于其一部分而可能变窄的文本列时快速响应或流畅的设计。 连字号使每个行上可以容纳更多文本，从而节省了屏幕空间，并有助于避免单词之间的宽空格所造成的“ 白色河流 ”光学现象。

There are three methods to indicate that a word can be hyphenated on a web page:

有三种方法可以指示一个单词可以在网页上连字符：

1. Insert the “soft hyphen” HTML entity ­ or ­ at the point between characters that may be broken. This could be considered “a hyphenation hint” – no hyphen should appear unless the entire word cannot fit on the end of a line, but if the portion before the hyphen can, the word will be broken, and a hyphen should shown by the browser. Unfortunately, support for soft hyphens is somewhat inconsistent, as of this writing.

   插入“软连字符” HTML实体 ­ 或­ 在字符之间可能会断开的点。 这可以被认为是“连字符提示” –除非整个单词不能放在一行的末尾，否则不应出现连字符，但是如果连字符前面的部分可以，单词将被打断，浏览器应显示连字符。 。 不幸的是，在撰写本文时，对软连字符的支持有些不一致。

2. Insert the tag as an alternative. The same idea as hyphen hinting, and boasting slightly better support, with the proviso that the browser does not insert a hyphen where the word is broken.

   插入标记作为替代。 与连字符提示相同的思想，并且具有更好的支持，但前提是浏览器不会在单词断开的地方插入连字符。

3. Apply the hyphens and word-break CSS properties.

   应用hyphens和word-break CSS属性。

In general, I’d recommend the last approach, rather than inserting individual hyphen hints. “Setting and forgetting” hyphenation for all paragraphs (on the assumption that that

elements have been used correctly, i.e. nothing marked up as paragraph content “just to get the content on a separate line”) is a good idea. The style declaration looks something like this:

通常，我建议使用最后一种方法，而不是插入单个连字符提示。 一个好主意是对所有段落进行“设置并忘记”连字符(假设

元素已正确使用，即没有将任何内容标记为段落内容“只是为了将内容放在单独的一行上”)是一个好主意。 样式声明看起来像这样：

p {word-break: break-word;-ms-word-break: break-all;-ms-hyphens: auto; -moz-hyphens: auto;-webkit-hyphens: auto;hyphens: auto; 
}

The values for word-break are required for IE 8-9 and different versions of Chrome. (The current build of Chrome doesn't support CSS hyphenation, but it will break words across lines. Safari does support hypens, in both desktop and mobile versions.)

对于IE 8-9和不同版本的Chrome，必须使用分word-break值。 (当前版本的Chrome浏览器不支持CSS连字符，但是会断行。Safari 确实在桌面版和移动版中均支持连字符。)

To achieve correct hyphenation, the page content should have a declared language, allowing the browser to reference a dictionary for appropriate word break positions. The easiest place to add this is in the opening tag:

为了实现正确的断字，页面内容应具有声明的语言，以允许浏览器引用字典以查找合适的分词位置。 最简单的添加方法是在开头标签中：

To turn hyphenation off (for example, on a special class of paragraph that you do not want to be broken), set hyphens and word-break to none. Setting hyphens to manual will cause the browser to only break words where you have indicated with soft or hard hyphens.

要打开断字断(例如，在一类特殊的段落，你不想被打破)，一套hyphens和word-break 无法比拟的。 将hyphens设置为“ 手动”将导致浏览器仅中断您用软或硬连字符指示的单词。

翻译自: https://thenewcode.com/429/Classic-Typography-Effects-Hyphenation

效果字体

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！