有时文字会溢出盒子，这时一般要对文字进行溢出处理。一般有以下三种处理方法：

1、word-break:normal | break-all |keep-all 

　　normal 使用浏览器默认的换行

　　break-all 允许单词内换行即允许单词拆开显示

　　keep-all 不允许拆开单词显示，连字符除外

　　这种方法只允许英文是使用，对中文无效。
<!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" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            width: 120px;

            height: 25px;

            border: 1px solid red;

            margin: 100px;

        }

        div:first-child {

            word-break: normal;

        }

        div:nth-child(2) {

            word-break: break-all;

        }

        div:last-child {

            word-break: keep-all;

        }

    </style>

</head>

<body>

    <div>

        my name is abcd .

    </div>

    <div>

        my name is abcd .

    </div>

    <div>

        my name is ab-cd .

    </div>

</body>

</html>

结果如下

2、white-space：normal |nowrap
　　normal正常换行
　　nowrap 强制同一行内显示所有文本
　　允许中文
<!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" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            width: 120px;

            height: 25px;

            border: 1px solid red;

            margin: 100px;

        }

        div:first-child {

            white-space: normal;

        }

        div:last-child {

            white-space: nowrap;

        }

    </style>

</head>

<body>

    <div>

        这是一行超级长的文字文字文字

    </div>

    <div>

        这是一行超级长的文字文字文字

    </div>

</body>

</html>

3、text-overflow:clip | ellipsis 
　　clip直接裁剪;
　　ellipsis 超出的部分用省略号代替;
　　ellipsis 使用扥前提是

　　（1）必须让文本先强制一行显示
　　（2）必须要和overflow搭配使用
<!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" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            width: 120px;

            height: 25px;

            border: 1px solid red;

            margin: 100px;

        }

        div:first-child {

            text-overflow: clip;

        }

        div:last-child {

            white-space: nowrap;

            text-overflow: ellipsis;

            overflow: hidden;

        }

    </style>

</head>

<body>

    <div>

        这是一行超级长的文字文字文字

    </div>

    <div>

        这是一行超级长的文字文字文字

    </div>

</body>

</html>

 

CSS 小结笔记之文字溢出处理的更多相关文章

  1. CSS 小结笔记之浮动

    在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...

  2. CSS 小结笔记之解决flex布局边框对不齐

    在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...

  3. css+div如何解决文字溢出

    看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...

  4. CSS 小结笔记之图标字体（IconFont）

    本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...

  5. CSS 小结笔记之em

    1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的 ...

  6. CSS 小结笔记之伸缩布局 (flex)

    CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...

  7. CSS 小结笔记之清除浮动

    浮动是一个非常好用的属性,但是有时会出现一些问题,需要进行清除浮动.例如 <!DOCTYPE html> <html lang="en"> <head ...

  8. css如何简单设置文字溢出盒子显示省略号

    1.单行文本溢出显示省略号单行文本溢出显示省略号,必须满足三个条件:(1)先强制一行内显示文本white-space:nowrap;(默认 normal自动换行)(2)超出的部分隐藏overflow: ...

  9. CSS 小结笔记之BFC

    BFC 即为Block formatting context 的缩写,BFC 主要用来将一个盒子设置为一个隔离的容器,不管盒子内部的元素具有什么属性,都不会影响到盒子的外面. 1.哪些元素能产生BFC ...

随机推荐

  1. Java之IO(一)InputStream和OutputStream

    转载请注明源出处:http://www.cnblogs.com/lighten/p/6964702.html 1.前言 计算机的IO操作一直都是比较重要的一环,IO顾名思义,就是输入输出流.不管是磁盘 ...

  2. Spring Security构建Rest服务-0702-个性化用户认证流程2

    登录成功后的处理AuthenticationSuccessHandler: 认证成功后,默认情况下spring security会继续访问之前访问的url,如果想自定义处理逻辑,用默认的就不行了.此时 ...

  3. python字符串中包含Unicode插入数据库乱码问题 分类： Python 2015-04-28 18:19 342人阅读 评论(0) 收藏

    之前在编码的时候遇到一个奇葩的问题,无论如何操作,写入数据库的字符都是乱码,之后是这样解决的,意思就是先解码,然后再插入数据库 cost_str = json.dumps(cost_info) cos ...

  4. phpredisadmin 莫名其妙错误，打开了无法显示任何数据

    一直用的好好的,某天突然只有页面基本框架,redis数据看不到了. 查日志嘛... PHP Fatal error:  Allowed memory size of 134217728 bytes e ...

  5. win7、8上走网络打印机(需找驱动包，不能自动)

    不多说,直接上干货! 简而言之,就是, 第一步是,将电脑与打印机联上网,进行匹配,即连上网可以查找到打印机的型号. 第二步是,安装驱动. D:\Driver\HP LJP2015 PCL6(注意,这个 ...

  6. springboot-17-springboot的文件上传和下载

    单文件上传 1, 需要使用thymeleaf模板:  http://www.cnblogs.com/wenbronk/p/6565834.html src/main/resource/template ...

  7. 剑指offer66:机器人的活动范围

    地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. 例如,当k为18时,机器人能够进入方格 ...

  8. jenkins自动化部署

    目录 typora-copy-images-to: pic Jenkins部署文档 一.安装环境 1.CentOs下安装JDK 2.CentOS安装Maven 3.CentOS安装git 4.Cent ...

  9. JDK动态代理[2]----JDK动态代理的底层实现之Proxy源码分析

    在上一篇里为大家简单介绍了什么是代理模式?为什么要使用代理模式?并用例子演示了一下静态代理和动态代理的实现,分析了静态代理和动态代理各自的优缺点.在这一篇中笔者打算深入源码为大家剖析JDK动态代理实现 ...

  10. UIKit 框架之Bar、Controller

    UIKit框架中有各种Bar,UITabBar.UINavigationBar.UIToolbar.Bar对应的就有一些Item,tabBarItem.navigationItem.toolbarIt ...