文字超出省略用哪個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;
}