html 页面太长,页面数据展示的太长，怎么让他自动换行

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法

对于div,p等块级元素

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行

html

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义

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;}

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

效果：可以实现换行

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

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

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

效果：容器正常，内容隐藏

对于table

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

abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

效果：隐藏多余内容

2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

abcdefghigklmnopqrstuvwxyz 1234567890

效果：可以换行

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;无法起作用

abcdefghigklmnopqrstuvwxyz1234567890

html 页面太长,页面数据展示的太长，怎么让他自动换行相关推荐

ggplot2作图细节（长宽数据转化，数据集挑选，变量排序，调色板限制变量解决方案）
ggplot2作图细节我们每个人作图之前都需要将数据整理到位,不然走不到作图哪一步,就进行不下去了.学会前期数据处理比后期图形选择更加重要. 长宽数据概念以及转换长宽数据在数据运算作图领域非常重要 ...
首页数据展示前端页面
首页数据展示前端页面 1.首页前端实现 1.1.封装api请求,用户调用后端接口 1.1.1.创建api文件夹,创建/api/hosp/hosp.js 1.1.2.创建/api/cmn/dict.js ...
SpringBoot简单项目搭建，从数据读取数据展示到页面
springboot快速搭建web项目,无需繁琐xml配置,热部署,无需重启服务器,简单部署只需打jar包即可,有很多的优点! 刚接触到springboot花费了好几个小时,撸完一个又一个的配置坑,最 ...
如何将数据库的数据展示在页面上面呢？
数据库中的数据这边只是为了说明如何将数据库的数据展示在页面上面,逻辑暂时不作考虑. 1.通过链接的形式去访问Servlet http://localhost:8080/JF190902/UserSe ...
Django----将后端数据展示在前端页面（展示用户列表及详情页）
需求描述: 如下图,将后台数据库中的用户列表数据展示出来,点击某用户后,进入信息详情页面解决方案: 涉及知识点:模板语言 django除了可以渲染html语言,还支持模板语言: {% for use ...
IOS UITableView详解一数据展示页面简单实现
为什么80%的码农都做不了架构师?>>> 一 UITableView简介 UITableView用于表格数据展示,是使用频率最高的控件.UITableView继承自UIScro ...
集合对象数据展示到前端页面
首先集合对象数据展示到前端容易被遗忘,这个问题还是记录下比较好.集合对象数据就是对象的集合数据通过迭代的方式分布到前端: @RequestMapping(value = "/item/ite ...
h5页面笔按下默认是拖动_屡屡刷屏的长页面H5原来是这样诞生的
昨天整理资料的时候,突然翻到了很早之前做的一个H5.看着那久远的日期,我不禁沉醉在假想的美好回忆中并沾沾自喜.然而,当我打开这个作品的时候--这是什么东西?!这是想气死谁?!不说那五颜六色的标题.时大 ...
android数据回传多个页面_Android Day06四大组件之Activity多页面跳转和数据传递
ToolBar中menu无法同时显示图标和文字问题的解决方法 Toolbar添加返回按钮 ToolBar与ActionBar 1.什么是Activity 官方文档是这么说的:Anwhich users ...

html 页面太长,页面数据展示的太长，怎么让他自动换行

html 页面太长,页面数据展示的太长，怎么让他自动换行相关推荐

最新文章

热门文章