[分享]css单行省略苹果手机兼容

在开发中，我们很常用到单行省略，用来显示超出元素宽度的文本。CSS提供了textoverflow属性，可以实现单行省略的效果。但是，在苹果手机中，有时候这个属性不生效，导致文本溢出显示。下面给大家介绍...

在开发中，我们很常用到单行省略，用来显示超出元素宽度的文本。CSS提供了text-overflow属性，可以实现单行省略的效果。但是，在苹果手机中，有时候这个属性不生效，导致文本溢出显示。下面给大家介绍如何解决这个问题。

/* 设置元素的宽度和text-overflow属性 */
.element {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
}

/* 设置元素特定的字体 */
.element {
  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",PingFang SC,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
}

/* 设置元素的line-height属性 */
.element {
  line-height: 1.4;
} 

为了修复苹果手机中的单行省略显示问题，我们需要给元素指定特定的字体，设置line-height属性，并且需要加上-webkit-text-overflow属性。如果你没有设置这些属性，那么就算在其他浏览器上这个样式生效，但是在苹果手机上依然会显示文本溢出。

总之，当在苹果手机上遇到单行省略不生效的问题时，可以先检查一下这三个属性有没有设置正确，应该就能解决问题了。