表格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. 类型转换构造函数 及使用explicit避免类型自动转换------新标准c++程序设计

    类型转换构造函数:  除复制构造函数外,只有一个参数的构造函数一般可以称作类型转换构造函数,因为这样的构造函数能起到类型自动转换的作用.例如下面的程序: #include<iostream> ...

  2. NSArray 数组

    前言 数组只能存储 OC 对象,不能存储 C 语言中的基本数据类型,也不能存储 nil . Xcode 7 对系统中常用的一系列容器类型都增加了泛型支持(),有了泛型后就可以指定容器类中对象的类型了. ...

  3. Navicat premium连不上Oracle的问题解决

    1.ORA-28547: 这是因为oci.dll版本不对.Navicat本地的OCI版本与Oracle服务器服务器不符造成的. 或者 打开Navicat premium客户端:Tool->Opt ...

  4. Scrapy爬虫入门Request和Response（请求和响应）

    开发环境:Python 3.6.0 版本 (当前最新)Scrapy 1.3.2 版本 (当前最新) 请求和响应 Scrapy的Request和Response对象用于爬网网站. 通常,Request对 ...

  5. centos7用docker安装单节点redis4.0.11

    [root@localhost conf]# docker search redisINDEX NAME DESCRIPTION STARS OFFICIAL AUTOMATEDdocker.io d ...

  6. 了解一个名词——GTD

    概念:就是Getting Things Done的缩写,翻译过来就是“把事情做完”,是一个管理时间的方法. 核心理念概括:就是必须记录下来要做的事,然后整理安排并使自己一一去执行. 五个核心原则是:收 ...

  7. Preprefix sum BZOJ 3155 树状数组

    题目描述 前缀和(prefix sum)Si=∑k=1iaiS_i=\sum_{k=1}^i a_iSi​=∑k=1i​ai​. 前前缀和(preprefix sum) 则把SiS_iSi​作为原序列 ...

  8. @ApiParam @PathVariable @RequestParam三者区别

    转载:https://www.cnblogs.com/xu-lei/p/7803062.html @ApiParam @PathVariable @RequestParam三者区别 1.@ApiPar ...

  9. [PowerShell]HTML parsing -- get information from a website

    link: http://stackoverflow.com/questions/9053573/powershell-html-parsing-get-information-from-a-webs ...

  10. vue 遇到的一个问题......

    当我用 @tap 或者 @click 触发 ajax事件时,返回的结果会非常慢--- 我也不清楚为啥会这样....(仅仅在chrome下会这样--- 所以 我用 touchend 方法替代了 该方法. ...