fkjj.net
当前位置:首页 >> 怎么让Div中的spAn自动换行 >>

怎么让Div中的spAn自动换行

给他们加上属性display:block; span是内联元素,块级化就可以换行了啊.

使用样式自动换行,比如<span style="word-wrap:break-word"> 显示内容</span>

html结构:<div class="divBox"><div class="divList"><span>123</span><span>45678</span><span>111111</span></div></div>css部分:divBox上设置{overflow-x: auto;} divList上设置{display:table}; span上设置{display:table-cell;white-space: nowrap;}优势:div宽度不固定,span宽度不固定

span是内联的,可以把它转换成区块才能换行,加上display:block;

有个自动换行bug,就是连续的字符过长时不会自动换行,如:“aaaaaaaaaaaaaaaaaaaa” 可以设置样式word-wrap:break-word; overflow:hidden;

你不要把span给固定了.只要你给设置为 width:100%; 就行了.让浏览器自动判断就行了.

div{width:300px;border:1px solid red;margin:10px;overflow:hidden;}.nowrap{white-space:nowrap;}这是一段很长的文字,中间没有空格,也没有换行,它不会自动换行直到被截取掉这是一段很长的文字,中间没有空格,也没有换行,但它会自动换行 上面两个div里超宽的文字,第一个里面的被禁止换行,然后超宽的被截取了;第二个不做设置,于是自动换行了.

用以下的方式即可: <div style="width:100px; word-break:break-all">你想自动换行的文本</div>

在#div1中加入 以下代码 word-wrap:break-word;允许长单词换行到下一行:

设置line-height的值即可控制行间距.

网站首页 | 网站地图
All rights reserved Powered by www.fkjj.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com