如何通过HTML和CSS仅在移动端使用软连字符()

API 探路者

2026-7-1

实现移动端专属软连字符换行（桌面端禁用）

方法：用CSS媒体查询控制软连字符显示

核心思路是把手动软连字符()包裹在自定义类的元素中，通过媒体查询让桌面端隐藏该元素，仅在移动端显示，从而实现仅移动端生效的可选换行。

调整HTML结构
将需要添加可选换行的单词，把软连字符放在带类的<span>标签内：

<!-- 示例：将长单词拆分为移动端可选换行 -->
antidisesta<span class="mobile-hyphen">&shy;</span>blishmentarianism

配置CSS媒体查询
设置桌面端（以屏幕宽度≥768px为例）隐藏该span元素，移动端保留：

/* 默认移动端生效 */
.mobile-hyphen {
  display: inline;
}

/* 桌面端隐藏软连字符 */
@media (min-width: 768px) {
  .mobile-hyphen {
    display: none;
  }
}

原理说明

移动端：<span>正常显示，生效，当单词因容器宽度不足需要换行时，会自动拆分并显示连字符；
桌面端：<span>被隐藏，相当于单词中无软连字符，即使句子其他内容挤压，也不会触发该单词的手动换行，保证完整显示。

补充：无HTML修改的替代方案

若不想调整HTML结构，可结合CSS的hyphens属性和媒体查询（仅针对英文单词，依赖浏览器自动连字符支持）：

/* 移动端启用自动连字符 */
@media (max-width: 767px) {
  p {
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
  }
}

/* 桌面端禁用所有连字符（含手动&shy;） */
@media (min-width: 768px) {
  p {
    hyphens: none;
    -webkit-hyphens: none;
    -moz-hyphens: none;
  }
}