表格table的td单元格中，文字长了往往会撑开单元格，但是如果table都不够宽了，就换行了好像（不要较真其他情况，我只说会换行的情况）。换行后的表格显得乱糟糟，不太好看，我不喜欢这样的换行。当然可以通过对每列td都设置宽度，那样太麻烦了，并且有时没法预计td中的文字会有多长，没法给固定宽度。

为了让表格里文字不换行（预计也不会太长的字符串），可以给表格里td添加一个nowrap属性，如 <td nowrap>文字内容</td> 这样。

但是如果给每个td都加上nowrap属性，貌似太繁琐并且占用空间和流量。于是乎，我找css的实现方法，不擅长此术，尝试了n多个样式后，找到white-space: nowrap; 貌似跟直接给td加nowrap差不多，那么就可以像下面这样定义样式，即可实现td里不换行，字符串长了就撑宽表格宽度。

<html>
<head>
    <style type="text/css">
        td
        {
            white-space: nowrap;
        }
    </style>
</head>

TD不换行 nowrap属性的更多相关文章

  1. table的 noWrap 属性不换行

    nowrap是什么意思? HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行. 但使用时要注意的是,td元素noWrap属性的行为与td元素的width属性有关. td元素中nowra ...

  2. css文本换行相关属性及解释

    本文摘自 http://www.wufangbo.com/css-qiang-zhi-huan-hang/ 强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个:word-wr ...

  3. HTML <td> 标签的 colspan 属性

    HTML <td> 标签的 colspan 属性 实例 表格单元横跨两列的表格: 浏览器支持 所以浏览器都支持 colspan 属性. 没有浏览器支持 colspan="0&qu ...

  4. td 不换行 隐藏显示多余的部分(转)

    转自:http://sha-tians.iteye.com/blog/1996162 table中td固定宽度后overflow:hidden不生效的问题 博客分类: html/css/js   前两 ...

  5. CSS 实现自动换行、强制换行、强制不换行的属性

    实现效果 1.自动换行: word-wrap:break-word; word-break:normal; 2.强制换行: word-break:break-all;       按字符截断换行 /* ...

  6. CSS 不换行 white-space 属性详解

    实例 规定段落中的文本不进行换行: p { white-space: nowrap } 可能的值 值 描述 normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTM ...

  7. HTML <td> 标签的 rowspan 属性

    rowspan 属性规定单元格可横跨的行数. colspan  属性规定单元格可横跨的列数.

  8. HTML <td> 标签的 width 属性

    <table border="1" width="100%"> <tr> <th>Month</th> < ...

  9. table 中 文字长度大于td宽度，导致文字换行 解决方案

    1.TD不换行 nowrap属性 表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况).换行后的表格显得乱糟糟,不 ...

随机推荐

  1. vs2015+opencv3.3.1 实现 c++ 彩色高斯滤波器（Gaussian Smoothing, Gaussian Blur, Gaussian Filter）

    //高斯滤波器 https://github.com/scutlzk#include <opencv2\highgui\highgui.hpp> #include <iostream ...

  2. openvpn的搭建与应用

    一.VPN概述: VPN(Virtual Private NetWork,虚拟专用网络)架设在公共共享的基础设施互联网上,在非信任的网络上建立私有的安全的连接,把分布在不同地域的办公场所.用户或者商业 ...

  3. 简单使用postman

    一.get请求 获取学生信息接口文档内容: 简要描述: 获取学生信息接口 请求URL: http://ip/api/user/stu_info 请求方式: get 参数: 参数名 必选 类型 说明 s ...

  4. 洛谷P4012 深海机器人问题（费用流）

    传送门 图给的好坑……还得倒过来…… 用大佬的图做个示范 我们考虑左图吧 把每一个点向下连边,容量$1$,费用为给出的价值(表示一个机器人可以过去取得标本) 再连一条边,容量$inf$,费用$0$(表 ...

  5. feign调用过程注意事项

    Feign是Netflix开发的声明式.模板化的HTTP客户端, Feign可以帮助我们更快捷.优雅地调用HTTP API. 在Spring Cloud中,使用Feign非常简单——创建一个接口,并在 ...

  6. js事件处理程序return false ,preventDefault,returnValue

    面试题目中,经常会被问到如何阻止默认行为. 以下是<javascript权威指南>书中的内容,详情可以去看书. 能够取消事件默认操作的方法有三种 1.属性注册的事件处理程序的返回值fals ...

  7. requirejs重点

    1.shim:用于配置不是通过define函数包装的文件,导出什么东西,如果这个文件不再baseURL目录下的话,需要在paths中配置文件目录.并且paths中的键名.shim中的键名.requir ...

  8. Android LayerDrawable资源应用

    1.介绍 (1)常识 (2)特点 2.实例演示 <1>新建drawable文件 app--->src---->main---->res---->drawable , ...

  9. 数据结构5.4_m元多项式的表示

    三元多项式表示如下: P(x,y,z) = x10y3z2 + 2x6y3z2 + 3x5y2z2 + x4y4z + 6x3y4z + 2yz + 15 然后对式子进行变形: P(x,y,z)=(( ...

  10. 权限管理系统源码分析（ASP.NET MVC 4.0 + easyui + EF6.0 + MYSQL/MSSQLSERVER +微软企业库5.0+日志绶存）

    系统采用最先进技术开发: (ASP.NET MVC 4.0 + easyui + EF6.0 + MYSQL/MSSQLSERVER +微软企业库5.0+日志绶存) 大家可以加我QQ讨论 309159 ...