css自动换行加前置_CSS实现自动换行的技巧

1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。

#wrap{white-space:normal; width:200px; }

或者#wrap{word-break:break-all;width:200px;}eg.

ddd1111111111111111111111111111111111

效果：可以实现换行

2.(Firefox浏览器)white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！

#wrap{white-space:normal; width:200px; overflow:auto;}

或者

#wrap{word-break:break-all;width:200px; overflow:auto; }

eg.

ddd1111111111111111111111111111111111111111

效果：容器正常，内容隐藏

对于table

1. (IE浏览器)使用样式table-layout:fixed；

eg.

.tb{table-layout:fixed}

abcdefghigklmnopqrstuvwxyz 1234567890

效果：可以换行

2.(IE浏览器)使用样式table-layout:fixed与nowrap

eg.

.tb {table-layout:fixed}

abcdefghigklmnopqrstuvwxyz 1234567890

效果：可以换行

3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

.tb{table-layout:fixed}

abcdefghigklmnopqrstuvwxyz 1234567890

效果：两个td均正常换行

3.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

eg.

.tb {table-layout:fixed}

.td {overflow:hidden;}

abcdefghigklmnopqrstuvwxyz 1234567890

这里单元格宽度一定要用百分比定义

效果：正常显示，但不能换行(注：在FF下还没有能使容器内容换行的好方法，只能用overflow将多出的内容隐藏，以免影响整体效果)

css自动换行加前置_CSS实现自动换行的技巧相关推荐

css自动换行加前置_StudyNode -- CSS
引入CSS的几种方式 block, inline, inline-block box-sizing 块级/内联元素的高度元素横向陈列的方法 CSS画三角形引入CSS的几种方式: 1.内联样式引入: ...
html让一个文案自动换行,word-wrap break-word使文本自动换行
在内容属性那里加上word-wrap: break-word; 如果右边留白太多的话,可以用word-break : break-all; <使用word-wrap:break-word使文本自 ...
CSS 实现加载动画之四-圆点旋转
原文:CSS 实现加载动画之四-圆点旋转圆点旋转也是加载动画中经常用到的.其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式.圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以 ...
关于js css html加载顺序整理
参考原文豆豆蛙:关于js css html加载顺序整理 1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控. 正 ...
webpack3 css,媒体查询不能使用CSS /样式加载器和Webpack3
我使用css-loader和style-loader为我的CSS,但所有媒体查询不起作用.我正在使用"webpack": "^3.4.1","css- ...
[css] 异步加载CSS的方式有哪些？
[css] 异步加载CSS的方式有哪些? 异步加载CSS 说到加载 CSS 这种事儿不是很简单吗?像这样咯: 这不就完事儿了嘛! 这样是没错!但是这样有问题啊--会阻塞渲染!浏览器看到这个标签就会停下 ...
[css] css的加载会阻塞DOM树解析和渲染吗？为什么
[css] css的加载会阻塞DOM树解析和渲染吗?为什么 css的加载不会阻止DOM树的解析 css的加载会阻止DOM树的渲染,因为css的下载完成后解析成CSSOM与DOM生成渲染树后,页面才会渲 ...
[css] css的加载会阻塞js运行吗？为什么？
[css] css的加载会阻塞js运行吗?为什么? 会阻塞js的执行,因为js可能会去获取或改变元素的样式,所以浏览为了不重复渲染, 等所有的css加载渲染完成后在执行js 个人简介我是歌谣,欢迎和 ...
CSS 实现加载动画之一-菊花旋转
CSS 实现加载动画之一-菊花旋转原文:CSS 实现加载动画之一-菊花旋转最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意 ...

css自动换行加前置_CSS实现自动换行的技巧

css自动换行加前置_CSS实现自动换行的技巧相关推荐

最新文章

热门文章