css display:“inline-block“錯位問題與css超出部分顯示省略號
阿新 • • 發佈：2020-12-23
技術標籤：css
前言：
最近在做超出部分以'...'顯示，遇到的問題記錄一下。
一、超出部分用三個點（...）顯示實現
切記需要給容器設定width樹形
1.單行實現
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>地域美食-晉城</title> <style type="text/css"> .box{ height: 60px; line-height: 60px; } .name{ display: inline-block; width: 40px; /* 文字顯示三個點 */ text-overflow: ellipsis; /* 空白部分不換行 */ white-space: nowrap; /* 超出部分隱藏 */ overflow: hidden; } </style> </head> <body> <div clas="box"> <span>姓名：</span> <span class="name">wcy000000000000000</span> </div> </body> <script type="text/javascript"> </script> </html>
2.多行實現
.name {
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width: 40px;
}二、遇到的問題及解決方案
上面兩個span要加超出部分隱藏必須設定width，span是行內元素所以加display:"inline-block"。加上就會出現對不齊的問題。
正常效果：
加上之後display:"inline-block"，明顯上移了。
解決方案：
加上vertical-align:top;屬性就可以了。top、bottom、middle......隨便哪個都行(有的瀏覽器不相容：inherit)，就可以解決了。