Google Sites图片长标题移动端截断问题解决方案咨询

一、核心原因 #

你遇到的问题是Google Sites内置的图片轮播组件对标题文本做了行数限制，在窄屏设备上会自动截断超出部分。从你提供的代码看，标题文本在<span class="Ecdcnc TMjjoe qnVSj">标签里，Google Sites的默认CSS会限制它最多显示1-2行，并添加省略号。

二、自定义CSS修改方案（如果支持的话） #

如果你的Google Sites允许添加自定义CSS（部分版本支持通过「设置」→「自定义CSS」功能），可以添加以下代码强制显示完整文本：

/* 让标题文本自动换行显示全部内容 */
.Ecdcnc.TMjjoe.qnVSj {
  -webkit-line-clamp: unset !important;
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
}

如果只想增加显示行数（比如允许显示3行），可以把-webkit-line-clamp: unset改成-webkit-line-clamp: 3。

三、无编码基础的替代方案 #

如果无法修改CSS，试试这几个简单方法：

• 改用独立文本框：把图片标题从轮播组件的标题栏移到图片下方的普通文本框里，普通文本框不会限制行数，移动端会自动换行。
• 添加点击查看功能：把标题改成短提示，比如「点击查看详情」，然后在标题上添加链接，链接到一个包含完整标题的页面或弹窗（Google Sites可以用弹窗组件实现）。
• 缩短标题+工具提示：保留短标题，然后在图片上添加工具提示（Google Sites部分组件支持设置自定义提示），用户hover或点击图片时就能看到完整内容。

四、注意事项 #

Google Sites的组件样式经常更新，自定义CSS可能会在平台更新后失效，建议测试不同设备的显示效果。

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