css溢出处理，overflow，text-overflow，white-space

最新推荐文章于 2024-04-26 09:18:36 发布

真诚的

最新推荐文章于 2024-04-26 09:18:36 发布

阅读量223

点赞数

分类专栏： web前端开发文章标签： css html 前端

本文链接：https://blog.csdn.net/zengjierong_plus/article/details/105566991

版权

web前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

空白处理

溢出处理

设置宽高，可能溢出。解决： overflow， scroll/hidden/auto/visible(默认，可视)

white-space属性–取值normal（默认忽略空白），pre（类比pre预格式），nowrap（单行不换行）。

text-overflow属性–取值ellipsis（省略号），string（用给定字符来代表修建部分）。

单行文本不换行，省略显示
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
鼠标在上时显示完整信息
:hover{overflow:visible;}

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>空白处理</title>
    <style>
    li
    {
     border-bottom: 1px dashed #ccc ;
     border-left: 2px solid #008c8c;
     margin: 10px 0px;
     width: 300px; ;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
    }
        
   li:hover{overflow: visible;}     
    </style>
</head>
<body>
    <div>
     <ul>
         <li>吱吱吱吱吱吱吱吱</li>
         <li>古装美女真好看，羡慕啊，好想穿古装啊，可惜没钱。</li>
         <li>哈哈哈哈哈</li>
         <li>外面的风景真好看，想去看看，可惜没有钱，钱真是个问题。</li>
         <li>兮跟嘻嘻嘻跟嘻嘻嘻嘻嘻</li>
         <li>有钱能使鬼推磨，无钱谁管你。</li>
     </ul>
    </div>
</body>
</html>

真诚的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css溢出处理，overflow，text-overflow，white-space

空白处理溢出处理设置宽高，可能溢出。解决： overflow， scroll/hidden/auto/visible(默认，可视)white-space属性–取值normal（默认忽略空白），pre（类比pre预格式），nowrap（单行不换行）。text-overflow属性–取值ellipsis（省略号），string（用给定字符来代表修建部分）。单行文本不换行，省略显示whi...
复制链接

扫一扫