• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > css 解决英文字符与阿位伯数字自动换行

css 解决英文字符与阿位伯数字自动换行

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含英文字符,阿位伯数字,自动换行等相关知识,佚名 希望在学习及工作中可以帮助到您
word-wrap是控制换行的,可取:word-wrap:break-word | normal | break-all | keep-all

break-word:它主要用来是控制是否将强制把单词换行,对于中英中文没有任何问题,但是对于长串的英文无效。
normal:英文单词不被拆开,它是默认值。
break-all,主要解决了长串英文的问题。主要用来是断开单词。在单词到边界时,下个字母自动到下一行。
keep-all,是指对于中、日、单词之间不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)
IE下:使用word-wrap:break-word;所有的都正常。
FF下:如这2个都不用的话,中文不会出任何问题。英文语句也不会出问题。但是,长串英文会出问题。
为了解决长串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式会导致,普通的英文语句中的单词会被断开(ie下也是)。
最好的方式是 word-wrap:break-word; overflow:hidden;
而不是 word-wrap:break-word; word-break:break-all;
也不是 word-wrap:break-word; overflow:auto;


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

#wrap{word-break:break-all; width:200px; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

效果:容器正常,内容隐藏.差不多了。

您可能想查找下面的文章:

  • css 解决英文字符与阿位伯数字自动换行

相关文章

  • 2017-08-06CSS 日期垂直排列的两种技巧
  • 2017-08-06css3高级选择器使用方法
  • 2017-08-06html+css实现登录界面附效果图
  • 2017-08-06将ul+li 分两列显示(横向显示)的方法
  • 2017-08-06详解css中的display属性
  • 2017-08-06div 背景透明度 如何设置一个div的背景透明度
  • 2017-08-06CSS中越界问题的经典解决方案【推荐】
  • 2017-08-06CSS样式继承和层叠
  • 2017-08-06详解CSS3的box-shadow属性制作边框阴影效果的方法
  • 2017-08-06使用CSS3中的calc()属性来以算式表达尺寸数值

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 网页引入css样式的几种方法
    • 一个div在浏览器水平居中的实现方法
    • 将一个DIV旋转的某一角度即90度/180度/270度及放大等问题
    • 纯CSS实现的小三角
    • cursor:hand与cursor:pointer的区别介绍
    • css inline-block介绍
    • CSS border-width 属性使用教程
    • CSS list-style-type属性使用方法
    • CSS之float在IE浏览器下换行问题解决方法
    • 使用单div实现CSS 绘图方法汇总

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有