看到标题你一定很轻易就会想到截断文字加“...”的做法。哈哈,就是这样。其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理。首先,先解释一下,一般用div+css的容器中文字超出长度会浮动到框外或者把框撑大,这个一般容易解决,但是我今天就遇到了这样的问题:在IE6下测试页面没反应,在IE8下测试页面却正常处理了溢出文字,我就郁闷了,这个溢出处理不是IE特有的吗?怎么IE6却不正常呢。后来网上查了才知道,原来IE6只支持div内写上溢出处理才有用,而IE6以上版本写在<li>里面才可以,所以我把相同的溢出处理代码写在了div中和<li>            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-07-29 14:33:54
                            
                                790阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            元素的显示与隐藏:    类似网站广告,当我们点击就不见了,但是重新刷新页面,会重新出现。本质:让一个元素在页面中隐藏或者显示出来。常用的三种方法:display、visibility、overflow1.display属性:display属性用于设置一个元素如何显示参数:        none:隐藏对象;    &            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-04-03 21:00:22
                            
                                155阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            作用:为了避免文本文字内容超出一定宽度后溢出,我们想要溢出的部分不显示但用省略号(...)显示使用:overflow与text-overflow顺序不能改换.ac li {
    display: block;
    float: left;
    width: 10%;
    height: auto;
 &            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-08-12 16:37:43
                            
                                324阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            ul {width:300px; margin:50px auto;}  li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}        CSS实战精萃 - Pro CSS TechniquesCSS实战:id是狙击枪 clas            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2022-07-22 12:50:16
                            
                                124阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            div显示上下左右滚动条<div style="width:260px;height:120px; overflow:scroll; border:1px solid;"> ·            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-07-25 17:08:40
                            
                                573阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            CSS: 溢出显示省略号 /* 单行 */ { overflow: hidden; text-overflow: ellipsis; max-width: 一个明确的值; } /* 多行 */ /* -webkit-box 有兼容问题 */ { max-width: 一个明确的值; display: ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-09-06 12:36:00
                            
                                668阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            #CSS .1 {position:relative;} .2 {position:absolute;left;0;bottom:0;} #HTML 不影响其他元素的情况下定位最好... 如果 DIV1 里 只有 DIV2 的话 在DIV2 CSS样式里 加一个 margin-top:10px; 10px 改成你要数值 或者在 DIV1 里加个 内边距 padding-top:10px;...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-08-05 15:27:20
                            
                                5986阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            溢出的文字显示省略号 white-space:nowrap overflow:hidden text-overflow:ellipsis 注意,只用这个的条件是盒子不能是靠文字撑开的,必须是块级元素,或者是行内块元素 ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-10-29 20:45:00
                            
                                159阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            1. overflow 属性介绍css 中的 overflow 属性用于控制内容溢出元素框时的显示方式。当元素框中的内容溢出时,无非就是两种情况: 、2. overflow 属性的值3. 自定义 overflow 的滚动条以前不知道 overflow 的滚动条样式是可以修改的,最近做的一个官网项目中前端提供的静态模板            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-01-25 20:05:23
                            
                                182阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            原本以为文字溢出的处理比较复杂,没想到这么一简简单单的一句话就搞定了,css真是神奇:style = "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"  现在学习希望搞清楚每个具体的属性的意思,存在脑子里,以后就可以顺手写出来啦!查阅了下,属性如下:white-space:nowrap;表示文本不会换行,在同一行继续            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                            精选
                                                        
                            2014-11-21 16:53:41
                            
                                752阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            前言:width和heigth不会相互作用 ,各自为政!1、当div设置了固定的长度和宽度后高度和宽度都行!:不管里面有没有内容(可以无视内容),div就是一个框子在那(默认无边框)!即使内容超出,尺寸也不变!#select_box {WIDTH: 330px; HEIGHT: 40px;border:2px solid red;}显示效果:2、若是div设置为百分比的形式宽度无论如何都行!:width:50%;能行! 无视内容! 即使内容超出宽度框的宽度还是50%,内容超出框而存在;高度无论如何都不行!:heigth:50%则不行 高度为内容的高度,如要设置高度 需要用height:50px            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2013-07-05 09:56:00
                            
                                404阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            <style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,end            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2016-03-22 14:40:00
                            
                                593阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            <style type="text/css">       .linear{           width:100%;           height:600px;           FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorSt            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2016-08-19 16:30:00
                            
                                1300阅读
                            
                                                        
                                点赞
                            
                                                                             
                 
                
                             
         
            
            
            
            功能:在div中垂直方向居中;效果:源码:居中显示解决方案#outer{	height: 100px;	overflow: hidden;	position: relative;}#outer[id] {	display: table;	position: static;}#middle { /*for explore            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-08-22 10:21:37
                            
                                51阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            #单行显示省略{white-space: nowarp;text-overflow: ellipsis;overflow: hidden;}#多行显示省略{overflow:hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}都可以通过max-width 限制宽度            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-12-12 17:02:19
                            
                                109阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            1. 单行溢出<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible"            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-05-16 02:40:36
                            
                                316阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
                    
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2024-03-20 11:01:02
                            
                                0阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            在开发web页面的时候经常会遇到文本溢出的问题,如果任由它,那么就会使页面的布局被打破;如果文本标签h1~h6/P/span被我们设置了高度,然后溢出隐藏,这样也能实现视...            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-09-14 16:27:16
                            
                                153阅读
                            
                                                                             
                 
                
                             
         
            
            
            
                         
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2015-06-27 17:32:00
                            
                                1959阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            10-1.html<html><head><title>div 标记范例</title><style type="text/css"><!--div{  font-size:18px;                       
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2009-08-02 14:26:38
                            
                                1004阅读