一、强制换行
1 word-break: break-all; 只对英文起作用,以字母作为换行依据。
2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据。
3 white-space: pre-wrap; 只对中文起作用,强制换行。
word-break:break-all 和 word-wrap:break-word 都是能使其容器如DIV的内容自动换行,它们的区别在于:
1、word-break:break-all
假设div宽度为450px,它的内容就会到450px自动换行,如果该行末端有个很长的英文单词,它会把单词截断,一部分保持在行尾,另一部分换到下一行。
2、word-wrap:break-word
例子与上面一样,但区别就是它会把整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉。
二、禁止换行
1 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; 是禁止换行。
overflow:hidden; 是让多出的内容隐藏起来,否则多出的内容会撑破容器。
text-overflow:ellipsis; 让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器,Opera浏览器用-o-text-overflow:ellipsis; 而Firefox浏览器没有这个功能,多出的内容只能隐藏起来。

css换行和超出隐藏的更多相关文章

  1. css强制换行和超出隐藏实现

        一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 ...

  2. css样式之超出隐藏

    文本超出部分隐藏,总结两种方法. 1.单行隐藏 html代码 <div class="mi">当文字超过范围的时候,超出部分会隐藏起来.</div> css ...

  3. CSS实现不换行/自动换行/文本超出隐藏显示省略号

    在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...

  4. CSS 超出隐藏问题

    .dropdown-navbar>li:last-child>a { border-bottom: 0 solid #DDD; border-top: 1px dotted transpa ...

  5. CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  6. CSS控制Span强制换行、溢出隐藏

    CSS控制Span强制换行 word-wrap: break-word; word-break: break-all; white-space: pre-wrap !important; 盒子文字设置 ...

  7. css实现中文换行,英文换行,超出省略

    英文换行时,是以单词换行,在对应的标签添加对应的属性即可 1 word-break:break-all;只对英文起作用,以字母作为换行依据 2 word-wrap:break-word; 只对英文起作 ...

  8. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  9. css文本超出隐藏 显示三个点

    文本超出显示三个点一般分两种情况 一,单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二,多行文本超出隐藏 ...

随机推荐

  1. 用python 爬取网页图片

    import re import string import sys import os import urllib url="http://tieba.baidu.com/p/252129 ...

  2. SSAS系列——【04】多维数据(物理体系结构)

    原文:SSAS系列——[04]多维数据(物理体系结构) 1.本地多维数据集 本地多维数据集和本地挖掘模型允许在客户端工作站与网络的连接断开时对该工作站进行分析.在与本地多维数据集进行交互时,ADMOD ...

  3. IOS中UIDatePicker

    UIDatePicker 1.常见属性 /* 样式 UIDatePickerModeTime,时间 UIDatePickerModeDate,日期 UIDatePickerModeDateAndTim ...

  4. PHP经验——获得PHP版本信息及版本比较

    原文:PHP经验--获得PHP版本信息及版本比较 偶然看到别人写的一句代码: <?php if (version_compare("5.2", PHP_VERSION, &q ...

  5. 从用python做zoj1011发生Non-zero Exit Code错误说起

    近期做了浙大oj的第1011道题,遇见一件奇怪的事.这道题我用c++和php做,提交后都正确.可是用全然同样的逻辑改写成python代码提交后却产生了Non-zero Exit Code的判题结果.p ...

  6. 给phpcms v9加入一个主题radio无线电button,它可反复使用,以创建不同的专题部分内容编辑器,添加一个主题来定义自己的领域

    1. 2. 找到 phpcms\modules\special\templates中的special_add.tpl.php和special_edit.tpl.php文件 special_add.tp ...

  7. WebApiContrib

    https://github.com/WebApiContrib ASP.NET Web API and Protocol Buffers Protocol Buffers are a super e ...

  8. C#获取本机所有用户名

    using System.DirectoryServices; using System.Runtime.InteropServices; (需要添加引用) [StructLayout(LayoutK ...

  9. HBuilder HTML 自定义代码块

    =begin 本文档是HTML代码块的编辑文件.注意不要把其他语言的设置放到html里来. HBuilder可使用ruby脚本来编辑代码块和增强操作命令. 1.编辑代码块 如果要新增一个代码块,复制如 ...

  10. SQL Server 性能调优 之运行计划(Execution Plan)调优

    运行计划中的三种 Join 策略 SQL Server 存在三种 Join 策略:Hash Join,Merge Join,Nested Loop Join. Hash Join:用来处理没有排过序/ ...