如何在WordPress中实现文章标题全设备固定两行后加省略号

完全按实际渲染行数控制截断效果，不需要硬卡固定字符数，适配桌面端、笔记本、移动端全场景的不同屏幕宽度。

具体操作步骤 #

• 打开WordPress后台，进入「外观」-「自定义」-「额外CSS」面板，所有修改都可以在这里完成，不需要改动主题核心文件，后续主题更新也不会丢失设置。
• 先通过浏览器开发者工具（按F12后点选对应标题元素），确认你要调整的文章标题对应的CSS类名，常见的标题类名包括.entry-title、.post-title、.archive-card-title。
• 把下面的CSS代码粘贴到额外CSS的输入框里，把代码里的类名替换成你实际找到的标题类名即可：

/* 固定两行展示，超出自动生成省略号 */
.entry-title, .post-title, .archive-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

方案说明与注意事项 #

• 这套截断逻辑完全按照元素的实际渲染行数判断：屏幕宽度大的时候一行能放下更多文字，就自动凑满两行；屏幕变窄的时候一行能放的字变少，就自动收短到刚好两行，不会出现某端三行、某端半行空的适配问题。
• 该属性的浏览器兼容性极强，从桌面端的Chrome、Edge、Safari，到移动端iOS、安卓的内置浏览器都能正常生效，不需要额外引入JavaScript代码，不会给页面增加额外的性能负担。
• 截断时生成的省略号是浏览器原生渲染的，不会出现半字截断、标点孤立在第二行行首的突兀问题，视觉效果比手动数字符截断更自然。
• 这种实现方式比手动限制固定字符数的方案适配性强很多：固定限字符的逻辑没法适配不同设备的字体渲染宽度差异，很容易出现桌面端标题只剩半行、移动端挤成三行的问题，这套基于实际行数的截断逻辑完全不会有这类问题。
• 如果设置后发现截断不生效，优先检查两点：一是标题元素是否之前加了white-space: nowrap的强制单行不换行样式，需要把这个属性删除；二是如果标题的文字是被<a>标签包裹的，要把截断样式加在<a>标签对应的类上，不要只加在外层的容器div类上。
• 不要给标题元素设置固定高度，否则会破坏自动行高的计算逻辑，可能出现文字被切一半的问题。

内容的提问来源于stack exchange，提问作者Arafat Rahman