解决table不能换行的问题与CSS之自动换行总结

时间:2022-09-20 19:33:00

table不能换行问题 一般是:一行里面全是数字或是字母或者结尾有多个感叹号而导致 table不能换行,中文默认的会自动换行的,字母不能换行问题:
style="table-layout:fixed; word-break: break-all; overflow:hidden;" 
复制代码在单元格属性里加入上面这句,如:
<td style="table-layout:fixed; word-break: break-all; overflow:hidden;">
复制代码用表格做网页排版的时候,一般都能正常使用。偏偏有时会碰到一段连续的英文词或者一堆感叹号(!!!)把网页就撑开的现象。

总结了一下,只要在CSS中定义了如下句子,可保网页不会再被撑开了。

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法

对于div,p等块级元素

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行

html 
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
css 
#wrap{white-space:normal; width:200px; }

IE浏览器

连续的英文字符和阿拉伯数字,使用word-wrap: break-word ;或者word-break:break-all;实现强制断行

html 
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

css 
#wrap{word-break:break-all; width:200px;}
或者 
#wrap{word-wrap:break-word; width:200px;}

Firefox浏览器
连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

html 
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

css 
#wrap{word-break:break-all; width:200px; overflow:auto;}

对于table元素
IE浏览器
1. 使用 table-layout:fixed;强制table的宽度,多余内容隐藏<table style="table-layout:fixed" width="200"><tr><td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td></tr></table>
复制代码2. 使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行 <table width="200" style="table-layout:fixed;"><tr><td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890</td><td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
复制代码3.在td,th中嵌套div,p等采用上面提到的div,p的换行方法

Firefox浏览器

1. 使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内,这里overflow:auto;无法起作用<table style="table-layout:fixed" width="200"><tr>

<td width="25%"  style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>

<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>

</tr></table>
复制代码2.在td,th中嵌套div,p等采用上面提到的对付Firefox的方法。

最佳CSS定义换行代码.wrap { table-layout:fixed; word-break: break-all; overflow:hidden; }
复制代码当然,这种现象出现的几率很小,但是不能排除网友的恶搞。

解决table不能换行的问题与CSS之自动换行总结的更多相关文章

  1. CSS样式自动换行&lpar;强制换行&rpar;与强制不换行

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

  2. 解决Table不继承父节点的属性的方法

    解决Table不继承父节点的属性的方法 发现table不继承父节点的属性. 解决方法:给html文件加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  3. 解决table插入tr错位

    table中用JavaScript插入隐藏(即display="none";)的tr时,别用display="block";换成display="&q ...

  4. CSS3解决字母不换行的方法

    CSS3解决字母不换行的方法 <pre>word-wrap: break-word;</pre>

  5. arcgis api 3&period;x for js 解决 textSymbol 文本换行显示(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  6. 使用INDY解决BASE64回车换行问题

    使用INDY解决BASE64回车换行问题 使用DELPHI EncodeStream(),对流数据进行BASE64编译以后,每隔75个字符,就会添加回车换行符(#$D#$A),这会造成许多问题. 网上 ...

  7. 用css解决table文字溢出控制td显示字数

    场景: 最左边这栏我不行让他换行,怎么办呢? 下面是解决办法: table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义 ...

  8. 用css解决table文字溢出控制td显示字数&lpar;转&rpar;

    场景: 最左边这栏我不行让他换行,怎么办呢? 下面是解决办法: table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义 ...

  9. 解决table td里面长串数字或字母不换行的问题

    在html中,经常要用到table标签,一般情况下,table下面的td元素里的东西都是汉字或者说是汉字.字母.数字的混合,在这种情况下,不设置table的宽度,也就是table宽度自适应的时候,浏览 ...

随机推荐

  1. Python全栈开发【基础一】

    Python全栈开发[第一篇] 本节内容: Python 的种类 Python 的环境 Python 入门(解释器.编码.变量.input输入.if流程控制与缩进.while循环) if流程控制与wh ...

  2. Plupload上传组件 &plus; javaweb实现上传源码以及DEMO

    Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度.图像自动缩略和上传分块.可同时上传多个文件: 上网找了很多Plupload的DEMO都无法正常使用, 而且Pluploa ...

  3. ECLIPSE&sol;MYECLIPSE OPERATES

    Eclipse相关操作 1.删除所有注释 1.eclipse删除所有注释 Ctrl+F: /\*{1,2}[\s\S]*?\*/ 选择正则表达式,替换全部即可.

  4. 算法设计与分析——多边形游戏(DP)

    1.问题描述:   给定N个顶点的多边形,每个顶点标有一个整数,每条边上标有+(加)或是×(乘)号,并且N条边按照顺时针依次编号为1~N.下图给出了一个N=4个顶点的多边形. 游戏规则 :(1) 首先 ...

  5. asp&period;net core 系列之并发冲突

    本文介绍如何处理多个用户并发更新同一实体(同时)时出现的冲突 . 主要是两种:一种,检查属性并发冲突,使用 [ConcurrencyCheck] ;另一种,检测行的并发冲突,使用 rowversion ...

  6. SQL语句练习题【主供自己学习、记忆】

    1.这是我在面试中遇到的一道sql题,没有答出来,o(╥﹏╥)o 这是我刚才在网上查找函数之后写的SQL语句,能得到这个结果.[谁有不同的方法,欢迎底下评论留言哈] select (DATENAME( ...

  7. 查看Python、flask 版本

    查看Django版本检查是否安装成功,可以在dos下查看Django版本. 1.输入python 2.输入import django3.输入django.get_version() 查看flask版本 ...

  8. LeetCode100&period;相同的树

    给定两个二叉树,编写一个函数来检验它们是否相同. 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的. 示例 1: 输入: 1 1 / \ / \ 2 3 2 3 [1,2,3], [1 ...

  9. 移动端适配方案-rem&lpar;基础篇&rpar;

    常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部) ②:flex (更多的用于复杂页面的布局 ...

  10. Winfrom 设置Panel添加滚动条

    AutoScroll是自动滚动的属性. 把AutoScroll设置为True;