css自动换行

方法一:首先固定表格宽度,即给表格一个宽度值(数值,非百分比)

方法二:强制不换行

  div{//white-space:不换行;normal 默认;nowrap强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象white-space:nowrap; }

方法三:自动换行

  div{ word-wrap: break-word; //word-break设置强行换行;normal 亚洲语言和非亚洲语言的文本规则,允许在字内换行word-break: normal; }

方法四:强制英文单词断行

  div{word-break:break-all;}

注:

在CSS中定义如下句子,可防止网页“被撑开”了:

  table{table-layout: fixed;}td(word-break: break-all; word-wrap:break-word;)

防止表格/层被“撑开”,同时保证分行时单个英文单词不会被拆开:

  table { table-layout: fixed;word-wrap:break-word;}

  div { word-wrap:break-word;}

时间: 2024-11-01 06:30:25

css自动换行的相关文章

css自动换行如何设置?url太长会撑开页面

我们更新文章时如果有引用其他文章一般会带一个原文url,但这个链接如果太长的话会把内容的版块撑开,整个排版乱了.那我们能不能设置css自动换行呢?如下图所示,其实只要两个样式就能搞定 word-wrap:break-word; word-break:break-all; word-wrap用来控制换行 两种取值: (1)normal  (2)break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题.但是对于长串的英文,就不起作用.) word-break用来

CSS自动换行、强制不换行、强制断行、超出显示省略号

P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是最近的项目中发现,使用ajax加载数据之后,p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,虽然解决了问题,但是并没有发现本质原因,本质在于,我当时获取的数据是一长串的数字,浏览器应该是对数字和英文单词处理方式相近,不会截断. 先给出各种方式,再具体介绍每一个属性. 强制不换行 p { white-space:nowrap; } 自动换行 p { word-wrap:break-word; } 强制英文单词断行

[转]CSS自动换行后缩进

原文 https://blog.csdn.net/u011974797/article/details/71439794 例如: ●这是第一行太长了超出 显示到第二行 想实现的效果: ●这是第一行太长了超出 显示到第二行 第二行换行的时候缩进了 加上样式{padding-left:25px; text-indent:-25px;} 原理就是先在左边用padding空开,再用text-indext把第一行收回来 原文地址:https://www.cnblogs.com/ybixian/p/1089

css样式积累

1.圆角: border-radius:16px 16px 16px 16px; 2透明度: filter: alpha(opacity=80); opacity: 0.8; 3. div内文本自动换行: <style type="text/css"> <!-- /* 自动换行 */ .atuo_break_line { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla,

HTML div css 强制 换行 不换行

解决 HTML div css 强制 换行 不换行 1.强制不换行,同时以省略号结尾. <div >你好朋友朋友朋友我为什么不能看到效果啊</div> 2.css自动换行div{ word-wrap: break-word; word-break: normal; } 3.css强制英文单词断行div{word-break:break-all;} 若是div嵌套,要使内层div根据内容自动换行,则可只设置外层的div宽,和 white-spance:nowrap即可. word-b

使用百分比固定的table大小中td内容自动换行问题

连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,对于Div和table以及不同的浏览器,实现css自动换行的方法都稍有不同,下面分别介绍: 对于div 1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准. 以下是引用片段:#wrap{white-space:normal; width:200px; } 或者 #wrap{word-break:break-all;width:200px;} <div id="wr

ERS遇到的问题及solution

1, js事件响应函数在firefox/safari中正确的设置 错误:a.onclick=function(){......}; 正确:a.setAttribute("onclick","...."); 2, VS中文件内容的批量替换 查找和替换中:勾选“正则表达式”选项 [示例: 替换onclick事件的绑定] onclick ={(.+)}(";)$ -----> setAttribute("onclick", \1&quo

html中的div、td 、p 等容器内强制换行和不换行的实现

div.td .p 等容器内强制换行和不换行,在某些情况下还是比较实用的,下面本文整理了一些相关方面的知识,并有具体的实现方法,需要的朋友可以参考下1.强制不换行,同时以省略号结尾. 代码如下:<div style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" > 你好朋友朋友朋友我为什么不能看到效果啊 </div> 2.css自动换行 代码如下:div{ wor

如何让html中的td文字只显示部分

效果 方法一: table增加下面属性 参考内容 HTML如何让table中的td内容过长显示为固定长度,多余部分用省略号代替 这个问题呢,是由于我们公司测试的部门测出来的,虽然说测试的内容本身就是个BUG,不过这个也让我学到了一个比较好的归类于布局的一个小技巧,就是将td标签中过长的内容只显示为这个td的width的长度,之后的便以省略号代替. 方式如下: 这个功能有一个前提,在table中必须设置style: table-layout: fixed; 这条属性就是让table的内部布局固定大