表格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. { "result": null, "log_id": 304592860300941982, "error_msg": "image check fail", "cached": 0, "error_code": 222203, "timestamp": 1556030094 }

    这个是人脸识别时无法检测到图片报的错,有时候我们检测一张图片是否在库里面,当一张图片明显在里面,还检测不到,如下面是我的代码 package Test1; import java.io.IOExcep ...

  2. bzoj2564: 集合的面积（闵可夫斯基和 凸包）

    题面 传送门 题解 花了一个下午的时间调出了一个稍微能看的板子--没办法网上的板子和咱的不太兼容-- 首先有一个叫做闵可夫斯基和的东西,就是给你两个点集\(A,B\),要你求一个点集\(C=\{x+y ...

  3. 1. Shell编程第一讲

    (1)shell 历史: Shell的作用是解释执行用户的命令,用户输入一条命令,Shell就解释执行一条,这种方式称为交互式(Interactive). Shell还有一种执行命令的方式称为批处理( ...

  4. 18、OpenCV Python 简单实现一个图片生成（类似抖音生成字母人像）

    __author__ = "WSX" import cv2 as cv import numpy as np def local_threshold(img): #局部阈值 gra ...

  5. 5、C++结构体的使用

    5.结构体定义 结构体是用户带定义的类型,而结构声明定义了这种类型的数据属性.定义了类型后,便可以创建这种类型的变量,因此创建结构包括两步.首先,定义结构描述——它描述并标记了能够存储在结构中的各种数 ...

  6. COCO2018 目标检测

    刚浏览了一下coco数据集官网,认真看了一下18年的目标检测任务,简单记录一下. coco2018目标检测挑战赛只进行实例分割的评比,虽然仍然可以输出bbox,但是不可以提交到比赛的服务器,原因是官方 ...

  7. 【转】intellij idea使用指南—— 导入Eclipse的Web项目

    通常一个团队中可能有人用eclipse,有人用intelliJ,那么经常会出现需要导入别人用eclipse建好的web项目.而IntelliJ提供了多种项目类型的导入方式,其中就有eclipse. 在 ...

  8. CentOS7 配置 nginx php php-fpm

    上一篇说到安装 php 装完并没有任何设置,这篇记录一下设置.先设置 nginx 吧,nginx 网上多如繁星的设置但大都比较简单,属于基础设置,因此此处只贴出设置后的结果,用红色框表示一些自己改动或 ...

  9. hdu3966 Aragorn's Story 树链剖分

    题目传送门 题目大意: 有n个兵营形成一棵树,给出q次操作,每一次操作可以使两个兵营之间的所有兵营的人数增加或者减少同一个数目,每次查询输出某一个兵营的人数. 思路: 树链剖分模板题,讲一下树链剖分过 ...

  10. WordPress 有关Https的设置

    开头卖萌求点击 https://www.yinghualuowu.com/ Http和Https的区别 就是多了s的区别(不是),简单点就是比http更安全了.23333.这里不打算说的太详细,知道前 ...