问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

iOS 手机上前端开发页面文本省略溢出问题如何解决？

头像
前端不太难
    22316

    前端开发的页面在部分 iOS 手机上出现了下面的情况，文本省略溢出问题

    我分析原因可能是由于不同系统包含的字体的行高不一致，即使设置了height = line-height 一样会有以上问题。但是不知道该如何解决。求助

    前端ioscss
    阅读 1.8k
    avatarAI BotBETA

    要解决 iOS 手机上前端开发页面文本省略溢出问题，你可以考虑以下一些方法：

    1. 使用 -webkit-line-clamp 属性

      你可以使用 CSS 的 -webkit-line-clamp 属性来限制在一个块元素显示的文本的行数。这个属性是 WebKit 浏览器的私有属性，在 iOS 的 Safari 浏览器上有效。

      .clamp-text {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* 显示省略号 */
}

    将上述样式应用到需要限制文本行数的元素上即可。

    1. 确保设置合适的 box-sizing

      确保元素的 box-sizing 属性设置为 border-box，这样 padding 和 border 不会增加元素的总高度。

      .clamp-text {
  box-sizing: border-box;
}

    2. 考虑使用第三方库或插件

      如果上述方法不适用或需要更复杂的文本截断逻辑，你可以考虑使用第三方库或插件，如 clamp.js，它提供了跨浏览器兼容的文本截断功能。

    3. 调整字体大小和行高

      如果问题的确与字体行高不一致有关，尝试调整字体大小或行高以确保在不同设备上的一致性。

    4. 使用媒体查询

      针对 iOS 设备使用媒体查询来应用特定的样式。这样，你可以根据设备的特性来微调布局和样式。

      /* 针对 iOS 设备应用特定的样式 */
@media only screen and (max-device-width: 768px) {
  .clamp-text {
    /* 调整样式以适应 iOS 设备 */
  }
}

    5. 测试和调试

      在多种 iOS 设备上进行测试，使用 Safari 的开发者工具进行调试，检查元素的计算样式，并尝试调整 CSS 属性以找到最佳解决方案。

    注意，解决文本溢出问题通常需要针对具体情况进行调试和优化。由于不同设备和浏览器的渲染差异，可能需要多次迭代才能达到理想的效果。

    4 个回答
    得票最新
    头像
    Swift社区
      11.9k2164
      ✓ 已被采纳

      我尝试了一下，在height = line-height = font-szie的情况下，加上padding-top: 1px可以解决这个问题，即在需要使用单行省略的地方加上，如下方代码

      
.demo {
    height: 28px;
    line-height: 28px;
    font-size: 28px;
    padding-top: 1px;
}

      这样使用，如：

      <div class="text-overflow demo">我是需要进行单行省略的文案</div>
      头像
      along
        1.7k321

        可以用js计算总宽度,然后计算最多可以显示多少文字，做截断处理。

        头像头饰
        前端扫地僧
          2.5k52944

          如果css不行，可以考虑用js来实现看看？动态计算并设置元素的高度和行高。通过获取元素的 scrollHeight 和 offsetHeight，可以动态地调整 line-height。

          <div class="test-ellipsis">我是一段文字啊测试一下数据</div>

          function adjustLineHeight() {
  const element = document.querySelector('.ellipsis');
  const lineHeight = element.scrollHeight / element.clientHeight;
  element.style.lineHeight = lineHeight + 'px';
}
          头像
          llfididi
            2811521

            这样的情况呢要给文字单独套一层span，然后设置让span不换行或者限制几行。和什么型号的手机是没有关系的。

                  <div style="width:80px">
        <span
          style="
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical;
            white-space: normal;
            word-break: break-word;
            word-wrap: break-word;
          "
        >
        两行就省略esttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
        </span>
      </div>

            让外层的div被span撑开就不会出现这样的情况了，而不是限制外层的高度。

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题
            宣传栏