CSS文字超出宽度---换行总结
2021-5-5重新总结---CSS文字超出宽度---附代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 20px;
} .parent {
width: 100px;
} .child1 {
background-color: #a1cef5;
line-height: 30px;
padding: 20px;
} .bgc_blue {
background-color: #a1cef5;
} .bgc_purple {
background-color: #dca1f5;
} .my_usually {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .my_usually1 {
white-space: nowrap;
overflow: hidden;
} /* 强制不换行 */
.nowrap {
white-space: nowrap;
} /* 允许单词内断句，首先会尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句 */
.breakword {
word-wrap: break-word;
} /* 断句时，不会把长单词挪到下一行，而是直接进行单词内的断句 */
.breakAll {
word-break: break-all;
} /* 超出部分显示省略号 */
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head> <body> <h1>使用样式控制字体换行下</h1>
<div class="my_usually"> </div>
<div class="parent">
<h2 class="nowrap">第1种：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;</h2>
<p class="my_usually bgc_blue">white-space: nowrap; ---overflow: hidden; text-overflow: ellipsis;</p> <h2 class="nowrap">第2种：white-space: nowrap; overflow: hidden; </h2>
<p class="my_usually1 bgc_blue">white-space: nowrap; ---overflow: hidden; </p> <h2 class="nowrap">第3种：white-space: nowrap; </h2>
<p class="nowrap bgc_purple">white-space: nowrap;----absavhsafhuafdfbjhfvsalguvfaihuivfs</p> <h2 class="nowrap">第4种：word-wrap: break-word; </h2>
<p class="breakword bgc_blue">word-wrap: break-word;----absavhsafhuafdfbjhfvsalguvfaihui</p>
<h2 class="nowrap">第5种：word-break: break-all; </h2>
<p class="breakAll bgc_purple">word-break: break-all;----absavhsafhuafdfbjhfvsalguvfaihuivf</p>
<h2 class="nowrap">第6种：wordwrap:breakword; </h2>
<p class="normal bgc_blue">wordwrap:breakword;----absavhsafhuafdfbjhfvsalguvfaihuivfsa</p>
<h2 class="nowrap">第7种：text-overflow: ellipsis; overflow: hidden; </h2>
<p class="ellipsis bgc_purple">text-overflow: ellipsis; overflow:
hidden;----absavhsafhuafdfbjhfvsalguvfaihuivfsab</p>
</div> <h1 class="my_h1">非使用样式控制字体换行下</h1>
<div class="parent">
<h3>汉字文字</h3>
<div class="child1">普通情况普通情况下普通情况下普通情况下普通情况下普通情况下下</div>
<h3>纯数字</h3>
<div class="child1">2222222222222222222222222222222222222222</div>
<h3>数字加文字加其他</h3>
<div class="child1">33333333333333333333普通情况3333333普通情况333333333333333333333333333333</div>
<h3>特殊符号加文字加其他</h3>
<div class="child1">————————————______普通情况3333333普通情况333333333333333333333333333333</div>
</div>
</body> </html>
多行文字自动换行居中--实测好用的很OK
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outDiv {
border: 1px solid black;
width: 200px;
height: 200px;
text-align: center;
overflow: hidden;
} .outDiv .innerDiv1 {
display: inline-block;
vertical-align: middle;
} .outDiv .innerDiv-fix {
display: inline-block;
width: 0;
height: 100%;
line-height: 100%;
vertical-align: middle;
visibility: hidden;
}
</style>
</head> <body>
<div class="outDiv">
<span class="innerDiv1">多行文字自动多行文字自动换行居中多行文字自动换行居中多行文字自动换行居中多行文字自动换行居中换行居中</span><span class="innerDiv-fix"><!-- 此标签不能换行 --></span>
</div>
</body> </html>
2021-5-5之前总结
以下转载自https://www.cnblogs.com/dtdxrk/
word-break:break-all单词截断自动换行
word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
支持版本：IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。
语法：word-break : normal | break-all | keep-all
normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
word-wrap:break-word单词不截断自动换行
word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。
支持版本：IE5.5以上 内容将在边界内换行。如果需要，词内换行( word-break )也将发生。表格自动换行，避免撑开。
语法： word-wrap : normal | break-word
normal : 允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要，词内换行（word-break）也行发生说明：设置或检索当当前行超过指定容器的边界时是否断开转行。
CSS强制性换行
一般情况下，元素拥有默认的
white-space:normal 自动换行
PS：不换行是white-space:nowrap
当录入的文字超过定义的宽度后会自动换行，但当录入的数据是一堆没有空格的字符或字母或数字（常规数据应该不会有吧，但有些测试人员是会这样子做的），超过容器宽度时就会把容器撑大，不换行。
解决方法（以IE，chrome,FF为测试浏览器）：
{
word-break:break-all; /支持IE，chrome，FF不支持/
word-wrap:break-word;/支持IE，chrome，FF/
}
建议：word-break 用3C检测会显示问题的，导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持 word-break属性可以用white-space:normal;来代替，这样在FireFox和IE下就都能正确换行，而且要注意，单词间的空格不能用 来代替，不然不能正确换行。
text-overflow省略号…样式语法结构
text-overflow语法：
text-overflow : clip | ellipsis
clip : 不显示省略标记（…），而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（…）
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
————————————
CSS文字超出宽度---换行总结的更多相关文章
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- Table组件设置文字超出宽度显示省略号，鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- easyui combobox下拉框文字超出宽度有横向滚轮
//下拉框显示横向滚轮 $(".combo").mouseenter(function(){ $(this).prev().combobox("showPanel&quo ...
- css 文字超出部分显示省略号(原)
单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...
- CSS文字超出div或者span时显示省略号
我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...
- css文字超出一行用点表示
1,css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 2,css超出二行用点表示 overflow:hi ...
- css 文字超出省略号
white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; 语法: text-ove ...
- css 内容超出宽度自动换行
1. word-break:break-all;只对英文起作用,以字母作为换行依据2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 PS:要设定宽度!
- css 文字超出部分隐藏
未做隐藏处理 执行结果: 1.1行超出部分省略号 效果: 2.多行超出部分隐藏(目前只能在chrome浏览器中使用,其他浏览器不兼容) 效果: -webkit-line-clamp 属性定义显示行数可 ...
- css文字超出指定行数显示省略号
display: -webkit-box; overflow: hidden; word-break: break-all; /* break-all(允许在单词内换行.) */ text-overf ...
随机推荐
- LcdTools如何通过PX01把EDP屏的EDID拷贝出来
PX01点EDP屏在上电过程会自动读取屏EDID,怎么把EDP EDID值拷贝出来呢? 在上电时序函数调用SetEdidRdShowEn(ON)指令开启EDID值读取显示功能.如下图 通过上述操作开机 ...
- iptables和firewalld基础
1.四表五链概念: filter表 过滤数据包 Nat表 用于网络地址转换(IP.端口) Mangle表 修改数据包的服务类型.TTL.并且可以配置路由实现QOS Raw表 决定数据包是否被状态跟踪机 ...
- Golang 加密方法
如果想直接使用我下列的库 可以直接go get 我的github go get -u github.com/hybpjx/InverseAlgorithm md5 加密--不可逆 MD5信息摘要算法是 ...
- Java 19 新功能介绍
点赞再看,动力无限. 微信搜「程序猿阿朗 」. 本文 Github.com/niumoo/JavaNotes 和 未读代码博客 已经收录,有很多知识点和系列文章. Java 19 在2022 年 9 ...
- Go语言核心36讲37
你好,我是郝林,今天我们继续来分享并发安全字典sync.Map的内容. 我们在上一篇文章中谈到了,由于并发安全字典提供的方法涉及的键和值的类型都是interface{},所以我们在调用这些方法的时候, ...
- lauyi渲染
下拉框 <div class="layui-form-item x-city" id="start"> <label class=" ...
- Linux禁止摄像头自动曝光(手动调节曝光)
前言 很多摄像头具有自动曝光的功能,例如在较暗的调节下,提高曝光率,在较亮的调节下降低曝光.下面简单介绍在linux平台俩种方式来修改自动曝光. 软件调节(图形化界面) 安装qv4l2 sudo ap ...
- updog:一款局域网传输文件的软件
前言 不知道你是否有过这样 的需求,在局域网传输文件,苦于没有好的软件支持,或者只能单向传输,updog可以完全解决这种问题 安装 pip3 install updog updog是python中的一 ...
- mybatis中xml的sql之test中文报错
在mybatis中sql,test中文报错( java.lang.NumberFormatException 这句话明确告诉了我们是数字格式异常).需加.tostring(). <if test ...
- Sqoop的介绍和安装
sqoop下载地址:https://share.weiyun.com/woVbfnfS 或者 https://archive.apache.org/dist/sqoop/1.99.7/ Sqoop简介 ...