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

Question

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

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

Answer 1

如果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';}

Answer 2

我尝试了一下，在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>

Answer 3

这样的情况呢要给文字单独套一层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撑开就不会出现这样的情况了，而不是限制外层的高度。

Answer 4

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

Answer 5

要解决 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; /* 显示省略号 */}

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

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

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

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

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

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

4. 调整字体大小和行高

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

5. 使用媒体查询

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

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

6. 测试和调试

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

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