div+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 style="table-layout:fixed" 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" 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. (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 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>
效果:隐藏多于内容
5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法
转载于:https://www.cnblogs.com/hsxiaoma/articles/1420529.html
div+css 英文或数字自动换行相关推荐
- css怎么控制两个字母,css英文字母数字自动换行且不断词方法
本文章来给各位同学介绍css怎样让英文字母数字自动换行且不断词方法总结,有需要了解的同学可进入参考. 当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器,不会自 ...
- css中字母数字自动换行
字母或数字自动换行,word-wrap:break-word;width:300px;
- css 英文或数字溢出问题
连续的输入英文或者是数字,就会产生这个问题.如果正常的中文就不会产生这种问题. 连续英文算作一个单词. 解决办法:CSS里填加 word-wrap:break-word; /* 单行溢出 */ .si ...
- 纯英文换行的css,利用CSS实现纯英文数字自动换行
下面为大家带来一篇CSS代码使纯英文数字自动换行的简单实现.内容挺不错的,现在就分享给大家,也给大家做个参考. 当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容 ...
- 解决英文或数字在HTMl网页中不自动换行。
对于网页设计的新手而言,在接触一段时间的HTML/CSS后,一定会遇到这样的问题:对于已经定义了宽度的容器(如DIV,TD,段落等)如果里面出现了较长的英文或数字,则内容不能自动换行然后会将框架撑出设 ...
- css英文文本不换行,CSS样式表让英文文本自动换行
大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是CSS如何将他们自动换行的方法!对于Div和table以及不同的浏览器,实现css自动换行的方法都稍有不同,下面分别介绍: ...
- html 数字自动换行,css怎么让连续数字字母强制换行?
在div+css布局中,在div.p.h2.h1等盒子里连续英文字母或连续数字会排成一排显示不会自动随盒子宽度限制而自动换行.那么怎么让连续数字字母强制换行?下面给大家介绍一下. 中文字在DIV或任意 ...
- html 英文自动换行,CSS让英文单词的自动换行
在制作网页过程中,css样式编写中,可能会遇到文字换行的问题,其中英文换行可能会困扰着很多初学者,而今天我就这个问题进行相应的阐述,学过css的朋友应该都知道,控制文字是否换行可以直接使用css中的w ...
- Qt:文本过长自动换行(支持纯英文, 纯数字)
此代码原理是获取字符串像素长度后, 超出设置的限制宽度后进行截取操作加换行符从而达到自动换行效果 Qt的Lable自带的换行属性不支持纯英文,纯数字的字符串换行 // font 设置的字体属性 // ...
- HTML5自动换行的间距设置,div css p段落行高行距怎么设置篇
如何使用div+css样式设置p段落之间的上下间距,需要设置哪些样式来控制 之间行距距离呢?css行高怎么写等问题,让大家彻底掌握div css p行距行高样式. DIVCSS5为大家介绍如何通过CS ...
最新文章
- go语言中的变量与作用域
- 华人开发世界最小电池,直径细如灰尘,可集成在芯片上供电10小时
- 最小二乘法多项式曲线拟合原理与实现--转
- go mysql 查询数据_MySQL常用语句之查询数据-Go语言中文社区
- Android 优化电池使用时间 ——监控电池电量和充电状态
- HBase - Filter - 过滤器的介绍以及使用
- PHP使用CURL抓取页面
- react json转换_Typescript + React 新手篇
- springbatch导出mysql数据到外部文件
- vue 判断对象不为空_Vue 学习笔记(二):实例
- Meteor在手机上运行
- 检测屏幕颜色显示坏点的一个小方法。
- WinForm CefSharp 笔记一(入门篇)
- 安装系统或者进PE蓝屏 代码:IRQL NOT LESS OR EQUAL
- Hermez官方文档翻译(二)开发者-开发指南
- Fluent保存的h5文件无法用Tecplot打开的问题
- 什么是虚拟机?虚拟机有那几种
- 一篇讲解iphone6 双核处理器的新闻稿
- 2022-2028全球可观察性解决方案套件软件行业调研及趋势分析报告
- 微商加人的24种方法微商怎么加人怎么做
热门文章
- Android基础之图片的压缩算法
- (日常搬砖)ubuntu18.04风扇断断续续响,提示 ‘GPU fan error‘
- Chrome浏览器的自动保存密码提示功能禁用方法
- 企业数据安全防护不可忽视,数据丢失/损坏如何处理?
- 大白话告诉你什么是java
- 1. 初识ZooKeeper。
- 思科将技术团队拆分为四块:安全、物联网、云与网络
- 怎样利用JDBC启动Oracle 自己主动追踪(auto trace)
- poj 2594 Treasure Exploration 匈牙利二分匹配+floyd
- 如何在 Mac 上查找和管理 Safari 下载?