设置div中文字超出时自动换行和css实现文本超出N行之后显示省略号等

一、对于div强制换行
1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。
#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}

2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;

同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！
#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }

二、对于table强制换行
1. (IE浏览器)使用样式table-layout:fixed；

2.(IE浏览器)使用样式table-layout:fixed与nowrap

3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

4.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div。

-----------------------------------------------------------------------------------------------------------------------------------

三、强制不换行：div{white-space:nowrap;}

四、自动换行：div{ word-wrap: break-word; word-break: normal;}

五、强制英文单词断行：div{word-break:break-all;}

css代码如下：

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //这儿的数字代表的就是你所需要实现效果的第N行
-webkit-box-orient: vertical;
1
2
3
4
5
6
1
2
3
4
5
6
效果如下图所示：

这里写图片描述

css小知识点集锦: 
1.子元素文字始终居中 
div{ width:300px; height:300px;border:1px solid red; } 
p{ height:300px; display:table-cell; verticle-align:middle; }

2.盒子水平、垂直居中 
2-1 ：CSS3写法 
display: flex; 
justify-content: center; /* horizontal centering */ 
align-items: center; /* vertical centering */ 
2-2 ：普通写法 //不支持IE6，IE7 
display: table-cell; 
vertical-align: middle;

3.给定宽度，内部文字，元素平均分布 
display: flex;//父盒子 
justify-content: space-around/space-between;//父盒子

4.文字显示第N行之后变成…显示 
text-overflow: -o-ellipsis-lastline; 
overflow: hidden; 
text-overflow: ellipsis; 
display: -webkit-box; 
-webkit-line-clamp: 2; //这儿的数字代表的就是你所需要实现效果的第N行 
-webkit-box-orient: vertical;

5.flex-grow 属性规定项目将相对于同一容器内其他灵活的项目进行扩展的量。 
父元素：display:flex; 
子元素：flex-flow: number|initial|inherit;

6.线性渐变 
-moz/o/ms/webkit-linear-gradient( [ || ,]? , [, ]* ) 
eg:background:-moz/o/ms/webkit-linear-gradient(top,#ccc,#000); 
线性渐变在ie下的应用： 
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/IE<9>/ 
-ms-filter: “progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)”;/IE8+/

7.animation: ; 
animation-fill-mode 
none:如果你希望某个关键帧的属性值应用，首先你的关键帧应该处于激活。 
forwards:在你的动画完成之后，所有的属性都保留结束时的值。 
backwards:动画会应用开始关键帧设置的属性值，即使关键帧还没有激活。 
both:forwards和backwards的结合。 
注意：animation-play-state：running/paused属性不能简写，要另外单独写

8.现阶段兼容性很差：object-fit:fill/contain/cover/none/scale-down/ 
object-fit主要适合于替换元素，比如：、、、、、和等。其默认值为fill。object-fill取值的说明如下：

fill:此值为boject-fit的默认值，替换内容的大小被设置为填充元素的内容框，也就是说，元素的内容扩大到完全填充容器的外形尺寸，即使这打破其内在的宽高比。 
contain：替换元素内容大小保持长宽比例填充元素内容容器，其具体对象大小被解析为一个包含元素的宽度和高度。也就是说，如果你在替换元素上设置一个明确的高度和宽度，此值将导致内容大小，完全在固定的比例显示，但仍在元素尺寸内显示。 
cover：替换元素内容大小保持长宽比例填充元素内容容器，其具体对象大小被解析为覆盖整个元素的宽度和高度。也就是说，替换元素内容大小保持长宽比，但改变宽度和高度，以便完全覆盖内容元素。 
none：替换元素内容不调整大小以适应内部元素的容器，内容完全忽略设置在元素上的任何高度和权重，并且仍在元素尺寸内显示。 
scale-down：当内容大小设置了non或contain，将导致具体对象变得更小。

9.针对360浏览器下不能解决outline:none;但会出现虚线边框的情况 
解决：在html中增加属性：hidefocus=”true”即可

10.实现图片居中的兼容性又比较好的方法 
html:

<ul class="imgWrap clearfix">
    <li><span></span><img src="img/HBuilder.png" alt="" /></li>
</ul>
1
2
3
1
2
3
css:

<style type="text/css">
.imgWrap li{ 
height: 219px;
float: left;
border: solid 1px #666;
margin: 10px 10px 0 0;
list-style: none;
text-align: center;
font-size: 0;
}
.imgWrap span {
display: inline-block;/*将行内元素改变为行内块元素显示*/
width: 1px;/*实现ＩＥ下可读效果*/
height: 100%;/*使用元素高度和图片容器高度一样*/
vertical-align: middle;/*垂直对齐*/
}
.imgWrap img {
vertical-align: middle;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
11.父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐(和图片居中差不多) 
html:

<div class="test"><span>这里存放的是文字</span></div>
1
1
css:

.test{
width: 300px;
height: 300px;
background: honeydew;
display: table-cell;
vertical-align: middle;
}
.test span{
display: inline-block;
vertical-align: middle;
}
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
12.css绘制三角形

width: 0;
height: 0;
border-bottom: 6px solid #ff3300;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
1
2
3
4
5
1
2
3
4
5
13.牛逼的 will-change属性

will-change属性可以提前通知浏览器我们要对元素做什么动画，这样浏览器可以提前准备合适的优

化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。元素可以更快的被改变，渲染的也

更快，这样页面可以快速更新，表现的更加流畅。

举个例子，当对于素使用 CSS 3D变形时，元素及其内容可以在合成到页面之前被创建到我们之前说

的layer。然而把元素放到layer中是个昂贵的操作，这将会导致变形动画延迟一个课件的瞬间，也

就是flicker

为了避免这种延时，我们可以在发生之前通知浏览器，这样浏览器会有一定的时间去准备这些变化

，当发生的时候layer已经准备好了，这样动画酒会很流畅，不会闪屏

使用will-change提示浏览器关于即将发生的变形十分简单，添加个CSS属性就行

will-change: transform; 
也可以告诉浏览器要改变元素的滚动条位置，或者多个要变化的属性，写下属性的名字就行，也可

以写多个，逗号隔开

will-change: transform, opacity; 
声明了元素即将进行的变化会让浏览器在渲染页面时做更好的决定，这明显比之前说的3D hacks要

好。

14.避免图中的长按弹出菜单与选中文本的行为、禁止选中文本 
a,img{ -webkit-touch-callout:none; } 
html,body{ -webkit-user-select:none;user-select:none; }

15.实现鼠标滑过出现块不被限定高度隐藏的方法

给最外层限定高度的div加上overflow:visible;

16.实现等比例图片不论始终居中问题；

html结构：

        <ul>
            <li>
                <a href="#">
                    <img src="img/car3.jpg" alt="car" />
                </a>
            </li>
        </ul>
1
2
3
4
5
6
7
1
2
3
4
5
6
7
css结构

        ul{
                width: 100%;
                height: 360px;

            }

            li{
                width: 615px;
                height: 360px;
                overflow: hidden;
                border: 1px solid #dbdbdb;
            }

            a{
                display: block;
                width: 615px;
                height: 760px;
                line-height: 760px;
                margin-top: -200px;

            }

            img{
                width: 100%;
                vertical-align: middle;
            }