最近调试程序，遇到如下问题：

也就是这个表格里面的文字被换行了，究其原因，主要是td中的width之和超过了100%导致的。谷歌了好久，终于发现，可以用noWrap="noWrap"来解决。

那么问题来了，noWrap到底是什么？

HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行。

　　但使用时要注意的是，td元素noWrap属性的行为与td元素的width属性有关。如果未设置td宽度，则nowrap属性起作用的，如果设置了td宽度，则nowrap属性不起作用。

　　nowrap表示是否允许表格中的文本换行

　　nowrap=true的时候不能换行

　　nowrap=false可以换行

解释如下：在内容超过了td的宽度时，内容才会出现换行，并且防止td的宽度被挤压，保证td能够真实的占有其自身定义的width，如果此时行中Td的宽度之和大于表格的现有宽度了，那么表格会增加自身的宽度来适应td宽度之和，而不是由表格的宽度来限制td的宽度。而在不定义nowrap的情况是，td的宽度会被尽量挤压以适应表格的总宽度定义，因此就出现了如上图所示的情况。

于是，在代码中加入noWrap="noWrap"，就解决了刚刚出现的问题

出来的结果：

问题得到解决。特此做笔记以说明！

td 元素属性 noWrap 防止折行、撑开及文字换行的更多相关文章

  1. HTML中表格元素TABLE,TR,TD及属性的语法

    table:表格元素及属性 <table width="80%" border="1" cellspacing="1" cellpad ...

  2. 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行，第二行省略号显示css方法

    文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap;  强制文本不换行 折 ...

  3. TD不换行 nowrap属性

    表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况).换行后的表格显得乱糟糟,不太好看,我不喜欢这样的换行.当然可 ...

  4. textarea的placeholder属性内容折行显示(PC和移动端端)

    1.PC端折行方法 placeholder="字体 字体" 可以使其折行显示   2.移动端折行方法 webkit内核 textarea::-webkit-input-placeh ...

  5. span 右浮动折行 解决ie6/7中span右浮动折行问题

    A floated box is shifted to the left or right until its outer edge touches the containing block edge ...

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

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

  7. 文字折行不折行 css

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

  8. css让文字，字母折行

    加上如下的CSS设置,就是设定好宽度width,然后设置合适的word-wrap和word-break属性: ul li{ width: 100px; word-wrap: break-word; w ...

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

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

随机推荐

  1. linux常用命令学习笔记

    1.top命令 作用:该命令可以按CPU使用.内存使用和执行时间对任务进行排序,常用来监控系统中占用CPU或内存较高的程序及CPU和内存的负载. 默认视图: 当想看系统负载时,可观察汇总的%CPU中的 ...

  2. 自定义了一个email模块，符合大多数人的使用习惯

    # coding: utf-8 import smtplib from email.mime.multipart import MIMEMultipart from email.mime.text i ...

  3. 错误提示:The project was not built since its build path is incomplete. Cannot find the class file for java.lang.Object. Fix the build path then try building this project The type java.lang.Object cannot b

    原文:http://www.cnblogs.com/mmzs/p/7662863.html 错误类型: 搞了很久才找到原因.解决办法写出来分享: 出现以上错误的原因是玩耍maven时多装了个jre.本 ...

  4. 路由器动态DNS设置

    路由器中的动态DNS设置非常的简单,只需要注册动态域名服务商的账号,然后在路由器中登录该账号就可以了 一.路由器动态DNS作用 无线路由器连接宽带上网后,路由器会从宽带运营商那里获取一个IP地址,这个 ...

  5. [android] 采用服务执行长期后台的操作

    服务:在后台长期运行的没有界面的组件 新建一个类PhoneService类,继承系统的Service类 清单文件中 进行配置 新建一个节点<service>,设置名称android:nam ...

  6. 异常：android.os.NetworkOnMainThreadException

    场景: 安卓开发时在主线程访问网络解决: 将访问网络的代码使用Thread操作 Handler handler = new Handler(){ @Override public void handl ...

  7. vue（一）使用vue-cli搭建项目

    一.安装node.js 去官网下载安装node.js:    https://nodejs.org/en/ 安装完成后,可以在命令行工具(Windows是cmd,苹果是终端控制)输入node -v 和 ...

  8. 魔幻般冒泡背景的CSS3按钮动画

    这是一款非常有特点的CSS3按钮,按钮的背景不是北京图片,也不是单纯的颜色,而是一组魔幻般的冒泡背景动画.当我们将鼠标滑过按钮时,按钮的冒泡背景动画就可以展示出来.可以说这款CSS3按钮的设计风格相当 ...

  9. css控制文字自动换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换 行的方法 对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...

  10. canvas-9NonZeroAroundPrinciples.html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...