css表格单元格中的长文本的显示问题
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法
对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
css
#wrap{white-space:normal; width:200px; }
1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行 #wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果:可以实现换行
2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
#wrap{word-break:break-all; width:200px; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果:容器正常,内容隐藏
对于table
1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏
<table width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
效果:隐藏多余内容
2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行
<table width="200" >
<tr>
<td width="25%" >abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td >abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果:可以换行
3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法
4. (Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用
<table width="200">
<tr>
<td width="25%" >abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" >abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
效果:隐藏多于内容
5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法
运行代码框
最后,这种现象出现的几率很小,但是不能排除网友的恶搞。
css表格单元格中的长文本的显示问题的更多相关文章
- EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字
EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字 Function 求数字和字母(对象 As String) '在文本与数字混杂中提取数字和字母 Dim myReg ...
- 使用POI创建word表格-在表格单元格中创建子表格
要实现的功能如下:表格中的单元格中有子表格 实现代码如下: XWPFParagraph cellPara = row.getCell(j).getParagraphArray(0); //row.ge ...
- poi 生成word 表格,并向表格单元格中插入多个图片
接这上一篇,导入数据,也要完整导出来.话不多说,直接上代码. 效果图 //根据实体对象 ,生成XWPFDocument public static XWPFDocument exportDataInf ...
- mysql 函数 GROUP_CONCAT 单元格中最长字符串和excel导出问题
GROUP_CONCAT 使用方式GROUP_CONCAT ([DISTINCT] 要连接的字段 [Order BY ASC/DESC 排序字段] [Separator '分隔符']) SELECT ...
- html如何设置表格单元格内容垂直居中?
父元素设置为表格的单元格元素td,而在表格单元格中的元素设置vertical-align: middle; 对父容器(td)使用:display: table-cell 其内子元素使用:vertica ...
- 将Word表格中单元格中的文字替换成对应的图片
示例 原文件结构: 替换后文档结构: 软件截图: 代码: using System;using System.Collections.Generic;using System.ComponentMod ...
- colgroup中col定义表格单元格宽度
colgroup中可以使用col来定义表格单元格宽度,可以使用像素(数字),百分比,我们来具体看看有什么不同. 先看一个最基本的:用像素(数字)表示,因为table有个宽度,这里表示占比 <ht ...
- python 将表格多个列数据放到同一个单元格中
表格模板: 目的将卡片1到卡片5的所有数据组合起来到一个单元格中如下入F列中(工作中为了避免手动复制粘贴),其余不变,因为数据太多 自己一个一个复制工作效率太低,所以写这个脚本是为了方便自己有需要 ...
- Swift - 可编辑表格样例(可直接编辑单元格中内容、移动删除单元格)
(本文代码已升级至Swift3) 本文演示如何制作一个可以编辑单元格内容的表格(UITableView). 1,效果图 (1)默认状态下,表格不可编辑,当点击单元格的时候会弹出提示框显示选中的内容 ...
随机推荐
- My blog in AI -- 梯度下降算法
人工神经网络是对生物神经网络的模仿,神经网络对一个问题的学习,需要经历数据输入.网络参数的训练.超参数的调节等部分. 这次我们来详细讨论一下神经网络的学习过程. 假设我们要训练一个神经网络去识别一张图 ...
- 一、django rest_framework源码之总体流程剖析
1 序言 有如下django代码,视图层: from django.http import HttpResponse from rest_framework.views import APIView ...
- perf工具crash的问题
perf抓取时系统crash的情况.找前同事了解到perf工具导致系统crash的一种情况, perf工具默认是使用cycles,这个硬件事件是使用NMI,可能会导致内核错误. 之前文档上的perf命 ...
- 命令:less
与more的区别 more在man手册中的英文原文是文件熟读过滤器(file perusal filter),其实可以理解为一种文本查看器. 它存在一些缺点: 必须事先加载完整个文件.因此在遇到大文件 ...
- phantomjs-prebuilt@2.1.16 install: `node install.js`
今天运行vue项目安装项目依赖(npm install)的时候,报这个错误: 解决办法: npm -g install phantomjs-prebuilt@2.1.16 --ignore-scrip ...
- ubuntu下 mysql安装以后无法登陆的的解决方法((ERROR 1698 (28000): Access denied for user 'root'@'localhost'))
1. 删除mysql sudo apt-get autoremove --purge mysql-server-5.0 sudo apt-get remove mysql-server sudo ap ...
- luoguP3235 [HNOI2014]江南乐 数论分块 + 博弈论
感觉其实很水? 题目就是一个Multi SG游戏,只需要预处理出所有的\(sg\)值即可\(O(Tn)\)计算 对于计算\(sg[n]\)而言,显然我们可以枚举划分了\(x\)堆来查看后继状态 那么, ...
- java线程系列文章之一(线程的安全性)
本文来自:高爽|Coder,原文地址:http://blog.csdn.net/ghsau/article/details/7421217,转载请注明. 当我们查看JDK API的时候,总会发现一些类 ...
- JAVA读入挂
队友扒的uwi的读入挂,非常强,再也不用担心java比C++慢了-- import java.util.*; import java.math.*; import java.io.ByteArrayI ...
- hdoj 5119 Happy Matt Friends 背包DP
Happy Matt Friends Time Limit: 6000/6000 MS (Java/Others) Memory Limit: 510000/510000 K (Java/Others ...