02-CSS基础与进阶-day10_2018-09-14-20-48-25

最新推荐文章于 2019-06-23 15:38:00 发布

weixin_30687587

最新推荐文章于 2019-06-23 15:38:00 发布

阅读量87

点赞数

原文链接：http://www.cnblogs.com/HiJackykun/p/11072897.html

版权

word-break属性
处理英文单词参考代码03
white-space
white-space:nowrap 强制一行显示文本
text-overflow 文本溢出

css雪碧技术
css精灵是处理网页背景图的方式，它将一个页面涉及的所有零星背景图集中到一张大图上，把大图应用在网页中
下周一

03word-break属性.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       div {
             width: 120px;
             height: 40px;
             border: 1px solid red;
             word-break: normal; /*默认值*/
             word-break: break-all;/*允许在单词内换行*/
             word-break: keep-all;/*只能在半角空格或连字符处换行*/
       }
    </style>
</head>
<body>
    <div>I am a-long,what is your name</div>
</body>
</html>

04white-space属性.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       div {
             width: 100px;
             height: 40px;
             border: 1px solid red;
             white-space: nowrap;
       }
    </style>
</head>
<body>
    <div>我是一个农民的孩子,深爱着这片土地1112222</div>
</body>
</html>

05文字溢出处理.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 30px;
            border: 1px solid #ccc;
            white-space: nowrap;
            overflow: hidden;/*溢出隐藏*/
            text-overflow: ellipsis;/*隐藏显示省略号*/
            /*clip */
        } 
    </style>
</head>
<body>
    <div>
        书上有路勤为径，学海无涯乐作舟
    </div>
</body>
</html>