问题描述:

  一个固定宽度的div里面包了一个p元素,由于p元素中的文字比较长并且没有换行,最终看到的效果就是p中的

  文字“跑”了出来。

问题复现:

        <div style="width:320px; border:solid 1px red;">
<p style="border:solid 1px green;">12345678901234567890123456789012345678901234567890</p>
</div>

  效果图如下:

  

  可以看出p中的内容“跑”到了p的外面去了;子元素(p)还是跟与元素(div)同宽的,由这个例子可以看出元素的宽度并不一定就是内容的宽度。

解决方法:

  给p元素加上自动换行的功能

        p {
word-wrap: break-word;
word-break:break-all;
}

  效果图如下:

  

---------

p标签不折行的问题的更多相关文章

  1. 提示标签title折行

    使用代码换行共两种代码,均可实现html标签内title内容显示时换行.换行代码符分别为:“ ”和“ ”以上符合数字输入均必须英文半角模式输入.使用时候,在需要换行地方任选一种(组)换行符号代码即可.

  2. echarts图表标签(axisLabel)折行

    在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...

  3. CSS3设置内容超过一定长度后自动折行

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

  4. 文字折行不折行 css

    white-space : 1. normal  默认值 ,文字自动换行.               2. pre 使用<pre>标签形式,表示元素.                 * ...

  5. HTML 折行br

    HTML 折行 如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签: <p>This is<br />a para<br /&g ...

  6. [修正] Firemonkey 中英文混排折行问题(移动平台)

    问题:FMX 在移动平台的文字显示并非由该平台的原生 API 来显示,而是由 FMX.TextLayout.GPU 来处理,也许是官方没留意到中文字符的问题,造成在中英文混排折行时,有些问题. 适用: ...

  7. div 纯数字很长时无法折行解决

    <div style="width:100%;word-wrap:break-word;word-spacing:normal;"> </div> 加上红色 ...

  8. iOS - UIButton折行文字显示设置

    首先在控制器中创建一个button - (void)viewDidLoad { [super viewDidLoad]; UIButton * button = [[UIButton alloc] i ...

  9. JavaScript 使用反斜杠对代码行进行折行

    JavaScript对代码行进行折行-使用反斜杠 您可以在文本字符串中使用反斜杠对代码行进行换行.下面的例子会正确地显示: <html> <head> <script t ...

随机推荐

  1. 算法笔记_229:有理数的循环节(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 1/7 = 0.142857142... 是个无限循环小数.任何有理数都可以表示为无限循环小数的形式. 本题目要求即是:给出一个数字的循环小数表示法 ...

  2. SpringBoot 分页处理

    开始主要是要使用已经设计好的数据库 -- ---------------------------------------------------- -- 用户 -- ----------------- ...

  3. XML的四种解析方法

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6646572.html  XML文档以层级标签的形式来组织数据,多用于配置文件.存储静态数据.交换数据.     ...

  4. JavaWeb开发之普通图片验证码生成技术与算术表达式验证码生成技术

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6134649.html    另:算术验证码生成的JSP.Servlet实现均已移植github:https:/ ...

  5. java 将数字转成成16进制

      java 将数字转成成16进制 CreationTime--2018年6月11日17点11分 Author:Marydon 1.前提 数字必须是byte类型,即[-128,127] 2.代码实现 ...

  6. 〖Windows〗三星(SAMSUNG)905S3G-K07 安装Windows 7 过程分享

    在京东买了一台笔记本(SAMSUNG 905S3G-K07)给女朋友,发现Win8还是使用得不太顺手: 于是决定把这个Win8操作系统切换到Win7,也开始了一段虐心的过程: 一.制作U盘启动 1. ...

  7. Linux下Shell元字符的释义

    Linux下shell的巧妙应用,对系统的运维很有四两拨千斤的功效! Shell元字符 注意: () 在当前shell的子shell进程运行命令 {}在当前shell进程运行命令

  8. JavaWeb学习笔记1

    表现层实现:先画静态界面(1定义界面须要显示的组件,2初始化组件并设置组件的属性,3把组件放入panel,把panel放入frame)写界面通过代码实现动态功能.  展示数据的步骤:1,i调用逻辑接口 ...

  9. Tomcat无法访问中文路径的解决办法

    来源于:http://sccassiel.blog.51cto.com/5398709/1141821/ 修改tomcat下的conf/server.xml文件下的 <Connector por ...

  10. 大量原创视频教程分享(01)---XSL语法教程

    首先,感谢博客园给这个平台来发布这些教程.. 这些教程都是本人亲自录制的,时间主要是2012-2014年,大概有几十部这么多,可能有说的不对的地方,如果可以,感谢你的指正 本人也不想误人子弟,大部分教 ...