如何通过CSS实现跨设备一致的文本排版（含指定位置换行）？

可以在不禁用viewport的前提下，通过CSS实现跨设备的统一换行效果，甚至添加更多文本后也能保证字符、标点及换行位置完全一致，核心思路是固定文本的排版规则，具体方法如下：

一、基础设置：确保换行位置一致 #

1. 使用等宽字体
   等宽字体的每个字符宽度完全相同，是实现字符位置统一的基础。直接在CSS中指定等宽字体族：

   font-family: 'Courier New', Courier, monospace;
   

   优先指定通用的等宽字体，避免不同系统默认字体差异影响排版。

2. 固定容器宽度为字符数单位
   使用ch单位设置容器宽度，1ch等于当前字体下数字"0"的宽度，对于等宽字体来说，1ch就是一个字符的宽度。根据你需要的每行字符数设置宽度，比如希望每行容纳30个字符：

   width: 30ch;
   

   这样不管设备屏幕尺寸如何，容器每行能容纳的字符数固定，自动换行的位置自然完全一致。

3. 锁定文本缩放与大小
   防止移动端浏览器自动缩放文本，同时固定字体大小，避免设备默认字体差异：

   font-size: 16px;
   text-size-adjust: 100%; /* 禁用移动端文本自动缩放 */
   

二、添加更多文本后的全统一保障 #

如果需要添加更多文本，除了保留上述基础设置，还可以通过以下方式进一步确保排版一致：

• 手动指定强制换行：如果需要在特定位置换行，直接插入<br>标签，比如：

  <div class="fixed-text">
    There are Sentences that start like this, go on like this,<br>
    and end like this. This is additional text that will wrap exactly at 30 characters.
  </div>
  

• 禁用自动换行的字符拆分：使用word-break: keep-all;避免浏览器在单词中间强制拆分换行，确保换行只发生在空格或指定位置：

  word-break: keep-all;
  

• 固定根字体大小：如果使用rem作为字体单位，先固定根元素的字体大小，避免设备默认根字体差异：

  html {
    font-size: 16px;
  }
  

完整示例代码 #

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .fixed-text {
      font-family: 'Courier New', Courier, monospace;
      width: 30ch;
      font-size: 16px;
      text-size-adjust: 100%;
      word-break: keep-all;
    }
  </style>
</head>
<body>
  <div class="fixed-text">There are Sentences that start like this, go on like this, and end like this</div>
</body>
</html>

按照以上设置，无论在移动端、桌面端还是平板端，文本的换行位置、字符及标点位置都会完全统一，且不受viewport的影响。

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