如图:

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. 十天冲刺---Day2

    站立式会议 站立式会议内容总结: git上Issues新增内容: 燃尽图 照片

  2. Android-动画简介

    Android中动画分为3种: ween Animation:通过对场景里的对象不断做图像变换(平移.缩放.旋转)产生动画效果,即是一种渐变动画: 也称View动画:也叫渐变动画,针对View的动画, ...

  3. python复习

    1.input和raw_input的区别 input假设输入的都是合法的python表达式,如输入字符串时候,要加上引号,而raw_input都会将所有的输入作为原始数据 2.原始字符串前面加上r,e ...

  4. 简单的JS控制button颜色随点击更改

    先上效果图: 默认“今日”是选中状态,是行内样式: <button type="button" id="today" class="btn-li ...

  5. nginx的安装

    1,,nginx的安装 为什么使用nginx我就不多说了,很优秀的,请再行google 在安装前,先安装pcre,安装zlib,安装openssl,以及一些其他包 yum install -y gcc ...

  6. Doccms 中新闻列表排序无效bug的修复

    手动修改 content/index/list.php 37 为 $sql="Select * FROM ".TB_PREFIX."list Where channelI ...

  7. jquery- pagination使用

    $("#gupiaopage").page({ showInfo: false, showJump: false, showPageSizes: true, firstBtnTex ...

  8. Spring常用注解，自动扫描装配Bean

    1 引入context命名空间(在Spring的配置文件中),配置文件如下: xmlns:context="http://www.springframework.org/schema/con ...

  9. [转]git在eclipse中的配置

    一_安装EGIT插件 http://download.eclipse.org/egit/updates/ 或者使用Eclipse Marketplace,搜索EGit 二_使用EGIT前的配置 配置个 ...

  10. VirtualBox提示：错误，创建一个新任务失败,被召者解决办法

    被召者 RC: REGDB_E_CLASSNOTREG (0x80040154) 目前有两种解决办法: 解决方法一: 打开命令窗口(快捷键:窗口键+R,输入cmd点击确定) 输入cd D:\Progr ...