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

css自动换行 防止撑破div影响排版

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

本文主要包含css,自动换行等相关知识,佚名 希望在学习及工作中可以帮助到您
对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
< 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;}

< id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111< /div >
效果:可以实现换行

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


#wrap{word-break:break-all; width:200px; overflow:auto;}

< id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111< /div >
效果:容器正常,内容隐藏

对于table

1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏

< style="table-layout:fixed" width="200">
<&

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

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

相关文章

  • 2017-08-06DIV多行文字显示不下溢出时显示...的css样式
  • 2017-08-06用纯css3实现的图片放大镜特效效果非常不错
  • 2017-08-06浅析css3中matrix函数的使用
  • 2017-08-06css样式中背景图片备用色的正确写法
  • 2017-08-06IE6的双倍,3px,注释引起的文字错位等几个BUG解决方法
  • 2017-08-06纯DIV+CSS实现圆角代码
  • 2017-08-06CSS中行间距问题示例探讨
  • 2017-08-06CSS3中box-shadow的用法介绍
  • 2017-08-06css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明
  • 2017-08-06关于li:hover的怎么清除浮动问题实现代码

文章分类

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

最近更新的内容

    • html+css实现登录界面附效果图
    • 关于css display: inline block inline-block的区别分析
    • css3 按钮 利用css3实现超酷下载按钮
    • 使用CSS3制作一个简单的Chrome模拟器
    • 一款基于css3的动画按钮代码教程
    • 实现CSS3中的border-radius(边框圆角)示例代码
    • ie6下a标签的onclick事件不执行问题解决方案
    • CSS的position属性在DIV层中的应用
    • IE浏览器单独写CSS样式的几种方法
    • css3动画事件—webkitAnimationEnd与计时器time事件

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

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