最近在写样式的时候发现,给元素设置了flex: 1
以及其子元素设置了white-space: nowrap
的时候,子元素的文字过长时候,会超出容器外。
先上代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; }
li { width: 350px; display: flex; border: 1px solid red; align-items: center; margin: 0 auto; }
img { width: 100px; height: 100px; display: block; }
.right { padding: 0 20px; flex: 1; display: flex; align-items: center; }
.right img { margin-right: 10px; width: 30px; height: 30px; }
.text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> </head>
<body> <ul> <li> <img src="https://imgsrc.baidu.com/forum/pic/item/aa64034f78f0f736a4a890f80955b319eac413f0.jpg"> <div class="right"> <img src="https://t8.baidu.com/it/u=195467712,4090358652&fm=218&app=92&f=JPEG?w=121&h=75&s=DF382CC708E2C49CD7B4EC3003006013"> <p class="text"> 这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字 </p> </div> </li> </ul> </body>
</html>
|
经过一番的谷歌,得出只需要
div.right
中添加
min-width: 0;
或者
overflow: hidden;
生成
BFC
即可让文字不再溢出。
完整代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; }
li { width: 350px; display: flex; border: 1px solid red; align-items: center; margin: 0 auto; }
img { width: 100px; height: 100px; display: block; }
.right { padding: 0 20px; flex: 1; display: flex; align-items: center; overflow: hidden; }
.right img { margin-right: 10px; width: 30px; height: 30px; }
.text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> </head>
<body> <ul> <li> <img src="https://imgsrc.baidu.com/forum/pic/item/aa64034f78f0f736a4a890f80955b319eac413f0.jpg"> <div class="right"> <img src="https://t8.baidu.com/it/u=195467712,4090358652&fm=218&app=92&f=JPEG?w=121&h=75&s=DF382CC708E2C49CD7B4EC3003006013"> <p class="text"> 这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字 </p> </div> </li> </ul> </body>
</html>
|