如何解决换行与1px像素问题

文字超出省略用哪个css样式？

单行文字

#box1 {
    border: 1px solid #ccc;
    width: 100px;
    white-space: nowrap; /* 不换行 */
    overflow: hidden;
    text-overflow: ellipsis; /* 超出省略 */
}

多行文字

#box2 {
    border: 1px solid #ccc;
    width: 100px;
    overflow: hidden;
    display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical; /* 设置子元素排列方式 */
    -webkit-line-clamp: 3; /* 显示几行，超出的省略 */
}

retina屏幕的1px像素，如何实现

普通的1px

如果仅仅使用 css 的 1px 来设置 border ，那可能会出现比较粗的情况。

因为，有些手机屏幕的 DPR = 2 ，即 1px 它会用两个物理像素来显示，就粗了。

#box {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

使用transform缩小,我们可以使用 css 伪类 +
transform 来优化这一问题。即把默认的1px宽度给压缩 0.5 倍。

#box {
    padding: 10px 0;
    position: relative;
}
#box::before {
    content: ‘’;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #d9d9d9;
    transform: scaleY(0.5);
    transform-origin: 0 0;
}

连环问
如果有border-radius怎么办？

• 可以使用box-show设置

#box2 {
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    /* border: 1px solid #d9d9d9; */
    box-shadow: 0 0 0 0.5px #d9d9d9;
}