zoukankan      html  css  js  c++  java
  • table中强制不换行

    总是一些文章说要强制换行,很少提到说如何不换行。

    一般都会使用word-break: keep-all;使得强制不换行。

    HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


    <title>I don't want to have a new line
    </title>

    <meta name="description" content="">
    <meta name="author" content="Yinkan">

    <link rel="stylesheet" href="./style.css" type="text/css" media="screen">

    </head>


    <body>
    <table>
        
    <tr>
            
    <td>不换行不换行不换行不换行 不换行不换行不换行不换行不换行不换 行不换行不换行不 换行不换行不换行不换行不换行不换行不换行不换行</td>
            
    <td>1111</td>
        
    </tr>
        
    <tr>
            
    <td>222</td>
            
    <td>2222</td>
        
    </tr>
    </table>
    </body>

    </html>

    table{width:100%;border:1px solid #999;}
    table td
    {word-break: keep-all;}

     这在IE下可以用,但是在FireFox和Chrome下是无法达到预期效果的。

    需要使用 white-space:nowrap;

    table{width:100%;border:1px solid #999;}
    table td
    {word-break: keep-all;white-space:nowrap;}

    才能显示正常(或者说,不正常,因为会打破原有的布局,并且突破父级元素的宽度)。 

    这年头什么奇特的想法都要去实现 …… 

  • 相关阅读:
    shopping car 1.0
    文件分类
    求1-100的所有数的和
    输出 1-100 内的所有奇数和
    求1-2+3-4+5 ... 99的所有数的和
    关闭提示的下拉框
    h5页面乱码-设置编码
    常用的css
    渲染后新元素没有绑定事件
    爬虫日记-关于一些动态爬取
  • 原文地址:https://www.cnblogs.com/liyinkan/p/1863382.html
Copyright © 2011-2022 走看看