问题描述:

  一个固定宽度的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. HttpLuaModule——翻译(二)

    access_by_lua access阶段.事例: location / { deny 192.168.1.1; allow ; allow ; deny all; access_by_lua ' ...

  2. Android开之在非UI线程中更新UI

    当在非UI线程中更新UI(程序界面)时会出现例如以下图所看到的的异常: 那怎样才干在非UI线程中更细UI呢? 方法有非常多种.在这里主要介绍三种: 第一种:调用主线程mHandler的post(Run ...

  3. iPad Air 2全然评測:可怕的三核CPU、六核GPU

    在了解了三核心A8X的基本情况后.我们再来通过測试数据,全面地了解一下iPad Air 2的性能表现,包含CPU.GPU.存储.电池.屏幕.摄像头.导航等等. [CPU性能測试:三核太可怕了] 移动处 ...

  4. from flask.ext.wtf import Form导入报错

    问题来源: 在学习Flask网上教程(PS:中文版教程链接,英文版教程其中代码是对的,运行没错误,我为了看的快一些,所以就直接看的中文版>~<,英文版教程链接)时,使用如下代码: from ...

  5. Windows Python+Eclipse环境配置

    参考这几篇博客: 1:http://www.cnblogs.com/realh/archive/2010/10/04/1841907.html 2:http://www.cnblogs.com/min ...

  6. Java多线程之Future与FutureTask

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6561154.html  一:Future 在使用实现Callable创建线程时,call()方法是有返回值的. ...

  7. 怎样使用Fiddler获取WebApi的token值?

    User-Agent: Fiddler Host: localhost: Content-Length: Content-Type: application/json grant_type=passw ...

  8. Eclipe快捷键

    常用的快捷键其实不多,但是用的少了又忘记了,所以讲常用的快捷键整理一下,方便以后自己来看. Ctrl+1 快速修复(最经典的快捷键,就不用多说了) Ctrl+D: 删除当前行 Ctrl+Q 定位到最后 ...

  9. JUC-线程池

    一,问题 在没有使用线程池的时候,每次需要一个线程都得手动new Thread()方式创建线程,用完了再销毁. 我们使用线程的时候就去创建一个线程,这样实现起来非常简便,但是就会有一个问题: 如果并发 ...

  10. Unbound服务的安装与运行管理

    一.Unbound服务的安装与运行管理 1.获取Unbound软件包 RHEL7.x自带了Bind和Unbound两种DNS服务包,Unbound是红帽公司推荐使用的DNS服务器.目前,虽然Bind在 ...