自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是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表格单元格中的长文本的显示问题的更多相关文章

  1. EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字

    EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字 Function 求数字和字母(对象 As String) '在文本与数字混杂中提取数字和字母   Dim myReg    ...

  2. 使用POI创建word表格-在表格单元格中创建子表格

    要实现的功能如下:表格中的单元格中有子表格 实现代码如下: XWPFParagraph cellPara = row.getCell(j).getParagraphArray(0); //row.ge ...

  3. poi 生成word 表格,并向表格单元格中插入多个图片

    接这上一篇,导入数据,也要完整导出来.话不多说,直接上代码. 效果图 //根据实体对象 ,生成XWPFDocument public static XWPFDocument exportDataInf ...

  4. mysql 函数 GROUP_CONCAT 单元格中最长字符串和excel导出问题

    GROUP_CONCAT 使用方式GROUP_CONCAT ([DISTINCT] 要连接的字段 [Order BY ASC/DESC 排序字段] [Separator '分隔符']) SELECT ...

  5. html如何设置表格单元格内容垂直居中?

    父元素设置为表格的单元格元素td,而在表格单元格中的元素设置vertical-align: middle; 对父容器(td)使用:display: table-cell 其内子元素使用:vertica ...

  6. 将Word表格中单元格中的文字替换成对应的图片

    示例 原文件结构: 替换后文档结构: 软件截图: 代码: using System;using System.Collections.Generic;using System.ComponentMod ...

  7. colgroup中col定义表格单元格宽度

    colgroup中可以使用col来定义表格单元格宽度,可以使用像素(数字),百分比,我们来具体看看有什么不同. 先看一个最基本的:用像素(数字)表示,因为table有个宽度,这里表示占比 <ht ...

  8. python 将表格多个列数据放到同一个单元格中

      表格模板: 目的将卡片1到卡片5的所有数据组合起来到一个单元格中如下入F列中(工作中为了避免手动复制粘贴),其余不变,因为数据太多 自己一个一个复制工作效率太低,所以写这个脚本是为了方便自己有需要 ...

  9. Swift - 可编辑表格样例(可直接编辑单元格中内容、移动删除单元格)

    (本文代码已升级至Swift3)   本文演示如何制作一个可以编辑单元格内容的表格(UITableView). 1,效果图 (1)默认状态下,表格不可编辑,当点击单元格的时候会弹出提示框显示选中的内容 ...

随机推荐

  1. 使用DNSPod域名解析

    1 在GoDaddy域名注册商 注册域名 https://sg.godaddy.com/zh/ 2 登陆DNSPod https://www.dnspod.cn 3 选择域名解析 添加域名 4 添加记 ...

  2. dSploitzANTI渗透教程之修改MAC地址与Wifi监听器

    dSploitzANTI渗透教程之修改MAC地址与Wifi监听器 dSploitzANTI基本配置 渗透测试是一种安全性较大的工作.所以,在实施渗透测试之前进行一些简单设置.如修改MAC地址.了解网络 ...

  3. WSGI剖析

    在一个 HTTP 请求到达服务器时, 服务器接收并调用 web 应用程序解析请求, 产生响应数据并返回给服务器. 这里涉及了两个方面的东西: 服务器(server)和应用程序(application) ...

  4. BZOJ 2959: 长跑 lct 双联通分量 并查集 splay

    http://www.lydsy.com/JudgeOnline/problem.php?id=2959 用两个并查集维护双联通分量的编号和合并. #include<iostream> # ...

  5. wikioi 1017 乘积最大

    dp[i][j]=max(dp[i][j],dp[t][k-1]*mapn[t+1][i]); dp[i][j]代表从0-i之间有j个乘号,mapn[i][j]表示第i位到第j位的数究竟是多少 #in ...

  6. (转,记录用)jQuery页面加载初始化的3种方法

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...

  7. Windows下Python版本的切换

    通常在Windows系统下我们可能安装了多个Python版本,那么该如何进行版本的切换呢?下面就Python2.7与Python3.0版本进行简单说明. 1.首先需要在Windows上安装Python ...

  8. 长城小主机GW1等型号进BIOS的设置方法

    主板型号 1.进BIOS办法 2.BIOS下设置U盘启动 3.主板设置上电启动 4.主要是否具有快速U盘启动功能 5.定时开机设置 945GMS Ctrl+Alt+F1(注意:自检响铃后,再按) 在B ...

  9. 在IIS上部署基于django WEB框架的python网站应用

    django是一款基于python语言的WEB开源框架,本文给出了如何将基于django写的python网站部署到window的IIS上. 笔者的运行环境: Window xp sp3 IIS 5.1 ...

  10. A SCSI command code -- SIMPLIFIED DIRECT-ACCESS DEVICE (RBC)

    SIMPLIFIED DIRECT-ACCESS DEVICE (RBC) ------------------------------------------ OP B Description -- ...