我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

整体来说，本文说的就是英文排版的时候，单词被分到两行的时候，显示在行末尾的连字符小横线。具体来说，就是hyphens属性。然而，hyphens的正确使用，却有很多的前置条件，这就是本文要讨论的问题。

苏南大叔：页面文字折行，css如何控制英文排版换行的连字符？ - 控制英文排版连字符
页面文字折行，css如何控制英文排版换行的连字符？（图5-1）

苏南大叔的“程序如此灵动”博客，记录苏南大叔的编程经验文章。本文测试环境：win10，chrome@123.0.6312.105。

测试例子

<style>
div {
  width: 95%;
  border: 1px solid black;
}
div.p0 {
  hyphens: auto;
}
</style>
<div class="p0" lang="en-us">
Sunan is a veryveryveryveryveryveryveryveryveryveryveryveryvery handsome manmanmanmanmanmanmanmanmanmanmanmanman. see more: https://www.newsn.net/about.html
</div>

无脑使用的话，就是hyphens:auto这个设置最常用。上面的例子里面，宽度是可变的。不断拉动浏览器边缘改变宽度，进而改变容器的宽度。就可以看到连字符在不同的地方出现了。

苏南大叔：页面文字折行，css如何控制英文排版换行的连字符？ - hyphens-demo
页面文字折行，css如何控制英文排版换行的连字符？（图5-2）

lang属性

hyphens连字符的出现规则，前提必然是类英文的文字了。而正常情况下，页面识别文字的方式也比较原始，就是读取容器的lang属性。那么正常情况下，是设置<html lang='zh'>的。当然，也可以设置容器的lang属性，只是比较不常见而已。

所以，如果类英文文章段落，怎么也调试不出来连字符。那么，可能的情况就请检查lang的设置吧。而且不同人类语言有着不同的连字符规则。hyphens:auto的auto就是浏览器按照预设的连字符规则进行显示的。

<style>
div {
  width: 95%;
  border: 1px solid black;
}
div.p0 {
  hyphens: auto;
}
</style>
<div class="p0" lang="en-us">
Sunan is a veryveryveryveryveryveryveryveryveryveryveryveryvery handsome manmanmanmanmanmanmanmanmanmanmanmanman. see more: https://www.newsn.net/about.html
</div>
<div class="p0" lang="zh-cn">
Sunan is a veryveryveryveryveryveryveryveryveryveryveryveryvery handsome manmanmanmanmanmanmanmanmanmanmanmanman. see more: https://www.newsn.net/about.html
</div>

苏南大叔：页面文字折行，css如何控制英文排版换行的连字符？ - lang-hypens
页面文字折行，css如何控制英文排版换行的连字符？（图5-3）

参考文章：

word-break: break-all冲突

如果设置了word-break: break-all，那么，永远不会显示连字符，两者冲突。但是，与此同时，连接符与word-wrap:word-break并不冲突！

<style>
  div {
    width: 95%;
    border: 1px solid black;
    hyphens: auto;
  }
  div.p0 {
    word-wrap: break-word;
  }
  div.p1 {
    word-break: break-all;
  }
</style>
<div class="p0" lang="en-us">
  Sunan is a veryveryveryveryveryveryveryveryveryveryveryveryvery handsome
  manmanmanmanmanmanmanmanmanmanmanmanman. see more:
  https://www.newsn.net/about.html
</div>
<div class="p1" lang="en-us">
  Sunan is a veryveryveryveryveryveryveryveryveryveryveryveryvery handsome
  manmanmanmanmanmanmanmanmanmanmanmanman. see more:
  https://www.newsn.net/about.html
</div>

苏南大叔：页面文字折行，css如何控制英文排版换行的连字符？ - break-word
页面文字折行，css如何控制英文排版换行的连字符？（图5-4）

word-break: keep-all下依然可以产生连字符

当然，这里讨论的是因为折行而可能产生的连字符现象。所以，和word-break:keep-all无关。

<style>
  div {
    width: 95%;
    border: 1px solid black;
    word-break: keep-all;
  }
  div.p0 {
    hyphens: auto;
  }
  div.p1 {
  }
</style>
<div class="p0" lang="en-us">
  Sunan is a veryveryveryveryveryveryveryveryveryveryveryveryvery handsome
  manmanmanmanmanmanmanmanmanmanmanmanman. see more:
  https://www.newsn.net/about.html
</div>
<div class="p1" lang="en-us">
  Sunan is a veryveryveryveryveryveryveryveryveryveryveryveryvery handsome
  manmanmanmanmanmanmanmanmanmanmanmanman. see more:
  https://www.newsn.net/about.html
</div>

苏南大叔：页面文字折行，css如何控制英文排版换行的连字符？ - keep-all-hyphens
页面文字折行，css如何控制英文排版换行的连字符？（图5-5）

这个例子似乎有些超出预期，即使keep-all，依然产生了连字符。这个说明在本文的测试环境下：hyphens:auto的优先级比keep-all更高一些。

总结

本文仅仅说明了hyphens:auto这一种最常见的情况，连字符的位置是由浏览器根据lang语言设置，然后匹配预制的连字符显示规则进行显示的。并且，遇到break-word的情况，会导致连字符不显示。
更多css相关文章，请点击：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   css