如何设置文本尺寸使每行水平长度一致，适配桌面与移动端？

CSS原生方案（推荐） #

不用手动调整字号，通过CSS自定义属性和clamp()函数就能实现自动适配，保证不同设备下两行标语宽度一致：

1. 先搭建HTML结构：

<div class="slogan-box">
  <div class="slogan-text" style="--char-num: 9;">FOLLOW YOUR</div>
  <div class="slogan-text" style="--char-num: 5;">HEART</div>
</div>

（--char-num对应每行的字符数量，比如第一行9个字符，第二行5个）

2. 添加CSS样式：

/* 务必在HTML头部添加这个viewport标签，解决移动端适配问题 */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* 标语容器样式 */
.slogan-box {
  max-width: 800px; /* 桌面端最大宽度 */
  width: 90%; /* 移动端自适应宽度 */
  margin: 0 auto;
}

/* 单行标语样式 */
.slogan-text {
  font-family: 你的目标字体;
  font-weight: bold;
  white-space: nowrap; /* 强制文本不换行 */
  width: 100%; /* 文本占满容器宽度 */
  /* 自动计算字号：最小1rem，最大6rem，中间根据字符数动态调整 */
  font-size: clamp(1rem, (100% / var(--char-num)) * 25, 6rem);
}

这个方案会根据每行的字符数量和容器宽度自动缩放字号，桌面、移动端都能保持两行宽度一致，无需手动适配。

WordPress插件方案 #

如果不想写代码，可以用以下插件配合实现：

• Elementor Pro：拖拽创建标语模块后，给每行文本添加自定义CSS，直接套用上面的样式代码，可视化调整更方便。
• Simple Custom CSS and JS：专门用来添加自定义CSS/JS代码，不用修改主题文件，把上面的CSS代码粘贴进去即可生效。
• Slider Revolution：自带文本自适应功能，创建滑块后设置文本“填充容器宽度”，就能自动调整字号实现等宽效果，但插件体积较大，适合需要复杂动画的场景。

解决移动端字号不一致问题 #

之前手动设置font-size在移动端表现异常，大多是因为没加viewport元标签，务必在HTML头部添加<meta name="viewport" content="width=device-width, initial-scale=1.0">，让浏览器正确识别设备宽度，保证CSS单位（比如rem、百分比）在移动端正常渲染。

内容的提问来源于stack exchange，提问作者Maria Paola Simbula