css文字的强制换行和超出宽度省略变成点儿

一、文字换行

  今天做div内部放文字时发现,不管我div设置多宽的属性,都会有div里面的字丁出去,不在div内部的状况,因此我就使用了css样式设置,强制将文字换行:

  三种方式

    1、 word-break: break-all; 只对英文起作用,以字母作为换行依据。
    2、word-wrap: break-word; 只对英文起作用,以单词作为换行依据。
    3、white-space: pre-wrap; 只对中文起作用,强制换行。

二、禁止换行且超出部分省略

  * 使用超出显示省略的时候,一定要给设置样式这层标签加一个max-width 或者 width, 若这层标签的上一级标签设置了宽度,那么这层标签的width可以设置成百分比。

overflow:hidden;//内容溢出处理
white-space:nowrap;//文字超出时不换行
text-overflow:ellipsis;//文字溢出处理

原文地址:https://www.cnblogs.com/Lyh1997/p/9967420.html

时间: 2024-11-10 14:44:14

css文字的强制换行和超出宽度省略变成点儿的相关文章

解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号

在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overflow:hidden;属性也不行:最后找的的解决方案如下: table{         table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } td{     width:100%;     word-break:keep-all;/*

CSS 中的强制换行和禁止换行

强制换行 1.word-break: break-all;       只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word;   只对英文起作用,以单词作为换行依据. 3.white-space: pre-wrap;     只对中文起作用,强制换行. 禁止换行 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文或数字字串(

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

一.强制换行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,它的内容就会到4

css文字描述,换行,省略号的一般设置

强制不换行:white-space: nowrap; 强制换行:word-break: break-all; 文字超出范围用省略号:text-overflow: ellipsis;overflow: hidden; 段落换行的一般的设置:设置固定的宽高,然后,设置文字的line-height: 注意:设置line-height:18px;height:18px;text-align:center;文字就会居中

css样式自动换行/强制换行

写样式时遇到的英文字符超出容器问题,度娘后了解下列知识,与大家分享,同时以便自己日后回顾. 一.自动换行问题 正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大. 下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的 white-space:normal ,当定义的宽度之后自动换行 html: <div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space

css控制div强制换行

div{white-space:nowrap;} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{word-break:break-all;}

css 强制换行

css强制换行和超出隐藏实现 一.强制换行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宽度

css文字环绕图片--遇到的问题及解决方法

一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 <style> .img-left { border: 3px solid #005588; width:300px; } .img-left img { float:left; /* 对图片进行浮动就可以实现了 */ width:150px; } </style> <div class="img-left"> <img src="https://ss0.

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

CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     width:31em;     word-break:keep-all;/* 不换行 */     white-space:nowrap;/* 不换行 */     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */     text-overflow:ellipsis;