如图:

1.自动换行

<div style="widht:100%;height:100%;word-wrap: break-word"></div>

2.限制宽高度

<div style="widht:100px;height:100px;overflow:hidden"></div>

(注意：如果div放在li中还需要加上display：inline-block属性)

CSS------当内容超出div宽度后自动换行的更多相关文章

  1. CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度

    如图: 1.自动换行 </div> 2.限制宽高度 </div> (注意:如果div放在li中还需要加上display:inline-block属性)

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

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  3. Html内容超出标记宽度后自动隐藏

    我们在显示长文本时,往往需要去在C#端去截取字符,但这绝对不是一个好方面,因为我们的长文本往往都是代HTML标记的,你一个载不好,就会出现乱码问题(出现半个HTML标记),而比较好的作法就是通过CSS ...

  4. css-div中文字过多（内容超出div宽度）后自动换行

    故事是这样的: 买家秀:(refuse)                                                                                ...

  5. CSS实现超出DIV宽度文字自动隐藏并显示省略号

    当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...

  6. 当div元素内的内容超出其宽度时，自动隐藏超出的内容

    word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ te ...

  7. css设置内容超出后显示省略号

    1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...

  8. CSS- 文本超出指定宽度后隐藏并显示为省略号

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:25em; word-break:keep-all;/* 不换行 * ...

  9. CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...

随机推荐

  1. 13-mv 命令总结

  2. 【Alpha版本】项目测试

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...

  3. android之ViewPager的使用

    XML代码 <android.support.v4.view.ViewPager   ViewPager控件        android:layout_width="wrap_con ...

  4. 在无修改权限的情况下修改文件hosts中的内容

    今天遇到了一个问题,本来希望修改hosts中的内容,但保存时被告知无权限,网上搜索有很多方法都无效,最后搜到一个简单的方法:将hosts文件复制到桌面上,修改,然后覆盖原来位置的hosts文件即可!

  5. 怎么解决mysql不允许远程连接的错误

    最近使用Navicat for MySQl访问远程mysql数据库,出现报错,显示"1130 - Host'xxx.xxx.xxx.xxx' is not allowed to connec ...

  6. shell 字符串截取

    ${expression}一共有9种使用方法. ${parameter:-word},如果parameter为空,则用word的值做parameter的缺省值 ${parameter:=word},在 ...

  7. GridView多表关联

    有些时候,需要多表关联查询,使用SqlDataProvider比较灵活 Controller中 use yii\data\SqlDataProvider; $dataProvider = new Sq ...

  8. bzoj4400: tjoi2012 桥

    先传代码再填坑 #include <iostream> #include <cstdio> #include <cmath> #include <cstrin ...

  9. 【BZOJ-1502】月下柠檬树 计算几何 + 自适应Simpson积分

    1502: [NOI2005]月下柠檬树 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1017  Solved: 562[Submit][Status] ...

  10. 【poj1013】 Counterfeit Dollar

    http://poj.org/problem?id=1013 (题目链接) 题意 12个硬币中有1个是假的,给出3次称重结果,判断哪个硬币是假币,并且判断假币是比真币中还是比真币轻. Solution ...