在用编辑器保存的数据到数据库的时候经常是在我们的内容前后加一个P标签，但是出来之后是一行，有时候会超过边框的宽度，所以研究了如何折行,如下代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div style="width:400px;background-color: #dcdcdc;height: auto;">

            111111111111111111111111111111111222222222222222222223333333333

        </div>

        <br>

        <br>

        <br>

        <div style="width:400px;background-color: #dcdcdc;height: auto; word-wrap:break-word; word-break:break-all;overflow: hidden;">

            111111111111111111111111111111111222222222222222222223333333333

        </div>

    </body>

</html>

效果:

解释:

overflow 属性规定当内容溢出元素框时发生的事情。

word-break:

word-wrap 属性允许长单词或 URL 地址换行到下一行。

CSS3设置内容超过一定长度后自动折行的更多相关文章

  1. Easyui datagrid 设置内容超过单元格宽度时自动换行显示

    datagrid 设置内容超过单元格宽度时自动换行显示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 单元格内容超过单元格宽度不会自动化换行.如下 ...

  2. emacs自动折行设置

    - emacs自动折行     - 临时设置下 M-x `toggle-truncate-lines`    - init.el 中添加 `(toggle-truncate-lines 1)`

  3. UIlabel多行文字自动换行 （自动折行）

    UIView *footerView = [[UIView alloc]initWithFrame:CGRectMake(, , , )]; UILabel *label = [[UILabel al ...

  4. js和css实现内容超过边框，就自动省略，自动添加title

    在项目汇总,我们有这样的需求,如果内容多了,就自动省略,自动添加title 这个需要判断判断俩个值,一个是width(),一个是scrollWidth, 在div中,如果内容没有超过边框,这俩个值是一 ...

  5. 实现当UILable的内容超出其范围后自动滚动效果

    本文主要介绍 [当UILabel的内容超出其自身的宽度范围后,进行互动展示的效果],我们先来看一下Demo的效果图. 实际实现起来并不十分繁杂,在这里,为了开发的效率,我们使用了一个已经封装好的UIL ...

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

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

  7. jqGrid 列内容超过一定长度省略表示

    jqgrid初始化方法中的,对应列添加formatter方法 colNames : [ "描述" ], colModel : [ { name : 'description', i ...

  8. freemarker数据格式化问题(即数值超过三位后自动添加逗号问题)

    实际数据:{value:1007, name:'通用设备'}, 浏览器回显数据: 得出: freemarker 当数据超过3位的时候,会自动用逗号截取 格式如:1,007 解决办法: 加?c,如:${ ...

  9. css 文本超出容器长度后自动省略的方法!

    我们在给用户显示文本内容的时候,往往需要避免文本内容超出容器宽度,防止换行溢出,小弟在网上找了下发现网上的实现仅仅只是实现了用 ...省略了的功能! 而并没有获取光标提示的功能,所有小弟就结合网上的代 ...

随机推荐

  1. kafka学习总结之集群部署和zookeeper

    1.  集群部署 kafka集群的瓶颈主要在网络和磁盘上:kafka依赖于zookeeper,zookeeper集群的节点采用奇数个,3个节点允许一个节点失败,5个节点允许2个节点失败. 图 1 ka ...

  2. 单片机内程序运行的时候ram空间是如何分配的？

    转自:http://blog.sina.com.cn/s/blog_a575eb9401014tam.html 单片机内程序运行的时候ram空间是如何分配的?我现对一个程序进行减少片内ram的使用的优 ...

  3. ElasticSearch 2 (26) - 语言处理系列之打字或拼写错误

    ElasticSearch 2 (26) - 语言处理系列之打字或拼写错误 摘要 我们喜欢在对结构化数据(如:日期和价格)做查询时,结果只返回那些能精确匹配的文档.但是,好的全文搜索不应该有这样的限制 ...

  4. C# 爬虫小程序

    设计思路 主要基于Http Get请求网页数据,进行分析.涉及递归调用,多线程提高效率,守护线程等. 相关技术 抽象类 多线程 队列 Http Get请求 字符串解析 项目结构 AbsChain 职责 ...

  5. 洛谷P2396 yyy loves Maths VII

    P2396 yyy loves Maths VII 题目背景 yyy对某些数字有着情有独钟的喜爱,他叫他们为幸运数字;然而他作死太多,所以把自己讨厌的数字成为"厄运数字" 题目描述 ...

  6. BZOJ2428 HAOI2006均分数据（模拟退火）

    显然可以状压dp.显然过不了. 考虑暴力模拟退火.每次随机改变一个数所属集合即可. 并不明白要怎么调参. #include<iostream> #include<cstdio> ...

  7. C/C++ Bug记录

    链接错误解决方法 1. 检查库是否链接正确 2. 库的顺序是否合理(如果库之间有依赖关系的话) 3. 检查obj文件是否存在既有C编译的,也有C++编译的,如果存在,用extern "C&q ...

  8. 自学Aruba1.1-WLAN一些基本常识

    点击返回:自学Aruba之路 自学Aruba1.1-WLAN一些基本常识 1. LAN.WAN.WLAN.WIFI术语 1.1 局域网(Local Area Network,LAN) 是指在某一区域内 ...

  9. 前端学习 -- Css -- 选择器的优先级

    当使用不同的选择器,选中同一个元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示. 优先级的规则 内联样式 , 优先级 ...

  10. 【模板】LCA

    代码如下 #include <bits/stdc++.h> using namespace std; const int maxn=5e5+10; inline int read(){ i ...