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

css word-break word-wrap 前台显示自动换行

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

本文主要包含css,word-break,word-wrap等相关知识,佚名 希望在学习及工作中可以帮助到您
word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。

break-word是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)


ie下:
使用word-wrap:break-word;所有的都正常。

ff下:
如这2个都不用的话,中文不会出任何问题。英文语句也不会出问题。但是,长串英文会出问题。
为了解决长串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式会导致,普通的英文语句中的单词会被断开(ie下也是)。

目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。
即英文单词应不应该被断开那?那问题很明显了,显然不应该被断开了。
对于长串英文,就是恶意的东西,自然不用去管了。但是,也要想些办法,不让它把容器撑大。
用:overflow:auto; ie下,长串会自动折行。ff下,长串会被遮盖。


所以,综上,最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下,长串会被遮住部分内容。



通过样式来实现

style="word-warp:break-word;word-break:break-all"
这两种只能解决文字自动换行
style="width:800;table-layout:fixed;"
图片自动换行,首先得通过样式控件表格宽度,唯一不足就是不能动态去改变宽度!

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

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06分享几个CSS小众但炫酷的技巧
  • 2017-08-06火狐在用offsetHeight获取div的高度时为0的解决方法
  • 2017-08-06网页中css四种链接引用方法浅谈
  • 2017-08-06兼容IE与firefox的css 线性渐变(linear-gradient)
  • 2017-08-06CSS实现限制字数功能当对象内文本溢出时显示省略标记
  • 2017-08-06什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
  • 2017-08-06CSS各种居中布局方法汇总
  • 2017-08-06浏览器全屏显示背景图片的css样式与html结构
  • 2017-08-06通过简单的css样式让按钮居中显示
  • 2017-08-06css中padding和margin的异同点介绍

文章分类

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

最近更新的内容

    • CSS的Word_break、Word_Wrap的区别及应用
    • 不定宽高div内图片垂直居中的css样式
    • css3 线性渐变和径向渐变示例附图
    • 纯css实现三角的简单实例
    • 30个开发人员有用的CSS代码片段整理值得借鉴
    • 让横向排列的几个浮动(float:left)的子div居中显示
    • CSS Hack 汇总快查 振之整理
    • 用CSS实现textArea中的placeholder换行功能
    • bootstrap3.0教程之栅格系统案例(包括栅格选项、从堆叠到水平排列、移动设备和桌面等
    • 纯css的accordion效果(代码分享)

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

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