font-weight:600；不生效以及单行多行文本省略，iphoneX 适配等常见CSS问题收集解决

最新推荐文章于 2024-08-06 17:01:31 发布

妍华

最新推荐文章于 2024-08-06 17:01:31 发布

阅读量3.4k

点赞数

分类专栏： Vue.js 文章标签： css

本文链接：https://blog.csdn.net/yanhua1575/article/details/109205929

版权

Vue.js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.user agent stylesheet

b标签没写加粗却加粗了，浏览器调试发现是b标签多了一个样式控制的，如下图
在这里插入图片描述
user agent stylesheet是浏览器默认样式表，在写网页时，没有指定的样式，按浏览器内置的样式表来渲染，不同浏览器甚至同一浏览器不同版本的默认样式是不同的。
解决方案：
由于user agent stylesheet的优先级很低，自己写样式覆盖即可。
在这里插入图片描述

2.android机型font-weight:600；不生效

android机型无法识别400，500，600这些字重，iphone正常，所以涉及这些字重的会自动适配最近字体，可以改为font-weight:boild;统一加粗。

3.单行文本省略

在这里插入图片描述
先设定div宽度，然后在需要省略的文字div内

overflow: hidden;
white-space: nowrap; 
text-overflow: ellipsis;

4.多行文本省略

在这里插入图片描述

display: -webkit-box;
-webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
overflow: hidden;

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

5.iphoneX 适配

由于iphoneX机型底部存在黑色横条，所以涉及底部按钮的地方应该做iphoneX适配

在这里插入图片描述

 @supports (height: constant(safe-area-inset-bottom)) or (height: env(safe-area-inset-bottom)) {
      .iphonex-wrap {
        padding-bottom: calc(env(safe-area-inset-bottom) + 1.6rem)!important;
        padding-bottom: calc(constant(safe-area-inset-bottom) + 1.6rem)!important;
      }
      .iphonex-wrap-bottom {
        padding-bottom: env(safe-area-inset-bottom)!important;
        padding-bottom: constant(safe-area-inset-bottom)!important;
      }
    }