CSS让网页中的内容自动换行的实现方法

css|网页

大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是 CSS如何将他们换行的方法!

对于div

1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。

#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}

<div id="wrap">ddd1111111111111111111111111111111111</div>

效果:可以实现换行

2.(Firefox浏览器)white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法,只能隐藏或者加滚动条,当然不加滚动条效果更好!

#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }

<div id="wrap">ddd1111111111111111111111111111111111111111</div>

效果:容器正常,内容隐藏

对于table

1. (IE浏览器)使用样式table-layout:fixed;

<style>
.tb{table-layout:fixed}
</style>

<table class="tbl" width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果:可以换行

2.(IE浏览器)使用样式table-layout:fixed与nowrap

<style>
.tb {table-layout:fixed}
</style>

<table class="tb" width="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果:可以换行

3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

<style>
.tb{table-layout:fixed}
</style>

<table class="tb" width=80>
<tr>
<td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果:两个td均正常换行

4.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style>

<table class=tb width=80>
<tr>
<td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>

这里单元格宽度一定要用百分比定义

效果:正常显示,但不能换行(注:在FF下还没有能使容器内容换行的好方法,只能用overflow将多出的内容隐藏,以免影响整体效果)

时间: 2024-11-08 17:14:45

CSS让网页中的内容自动换行的实现方法的相关文章

《HTML5 开发实例大全》——1.20 分组列表显示网页中的内容

1.20 分组列表显示网页中的内容 实例说明 在传统的HTML标记语言中,可以通过< ul >.< ol >.< dl >元素实现分组效果.在全新的HTML 5中,对原有的分组内容元素< ul >.< ol >.< dl >进行了整体改良,有的元素增加了许多新的属性,有的元素则废除了一些不合理的原有特征. (1)< ul >元素. 在HTML 5中,< ul >元素用于定义页面中的无序列表,其用法与HTML 4

服务器-如何把h5网页中的内容生成xml格式的文件?

问题描述 如何把h5网页中的内容生成xml格式的文件? h5网页中有四个输入框,分别是用户名,旧密码,新密码,确认新密码,和一个提交按钮,现在想通过点击提交按钮,把输入框的内容生成一个xml文件,然后上传到服务器中.这个xml文件怎么生成,谢谢! 解决方案 网页中显示xml,直接显示xml格式的文件网页(html)中直接显示xml原始文件,直接显示xml格式的文件 解决方案二: 自己组合成xml字符串,然后复制给表单的隐藏控件就行了

关键字-搜索网页中的内容html+js

问题描述 搜索网页中的内容html+js 用js实现,按照输入的搜索关键字,筛选网页当中的内容.网页上主要是新闻链接.只显示包含关键字的新闻链接.然后在别的网页搜索的时候,如果选择搜索新闻,也会跳转到这个网页,然后执行新闻的筛选. 解决方案 获取页面上的所有a对象变量innerHTML属性是否包含你的关键字,包含就显示,不包含隐藏.不知道你的新闻链接怎么导入页面的,如果是iframe框架别人的网页跨域了是获取不到链接对象的 <a href="#">关键字1</a>

获取WebView加载HTML时网页中的内容

MainActivity如下: package com.example.testgetwebviewcontent; import android.app.Activity; import android.graphics.Bitmap; import android.os.Bundle; import android.webkit.WebView; import android.webkit.WebViewClient; /** * Dmeo说明: * 当WebView加载网页时获取该网页中的

PHP批量获取网页中所有固定种子链接的方法_php技巧

本文实例讲述了PHP批量获取网页中所有固定种子链接的方法.分享给大家供大家参考,具体如下: 经常的下载链接比较多的时候,就像一次性将所有的链接添加到迅雷或者电炉,但是没有在这种选项,怎么办,咱是PHPer啊,这事儿难不到咱 且看代码,当然要换成你的,要根据具体情况来做修改. <?php header("content-type:text/html;charset=utf8"); $str = file_get_contents('./ShowFile.asp'); $str1 =

JavaScript获取网页中第一个图片id的方法_javascript技巧

本文实例讲述了JavaScript获取网页中第一个图片id的方法.分享给大家供大家参考.具体如下: 下面的代码通过document.images获取网页中的所有图片,然后获取第一个图片的id属性 <!DOCTYPE html> <html> <body> <img id="klematis lilac" border="0" src="klematis.jpg" width="148"

JavaScript获取网页中第一个链接ID的方法_javascript技巧

本文实例讲述了JavaScript获取网页中第一个链接ID的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过document.links获得网页中的所有超级链接数组,然后获得第一个链接的ID属性 <!DOCTYPE html> <html> <body> <h1>sharejs.com</h1> <img src ="planets.gif" width="145" height="

通过CSS让网页中的鼠标指针一直都是手形

如何让网页中的鼠标指针一直都是手形呢?很简单,在网页body上方加入如下的CSS代码就OK了,试试吧. <style type="text/css"><!--body{cursor:pointer;}--></style> 以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

简单也复杂 网页中的文章的标题定义方法

网页 针对教程网站或者新闻网站,教程标题或者新闻标题如何定义呢? 文档标题是文档的最主要的组成部分,也是搜索引擎蜘蛛爬行时最关注的内容,该如何定义标题呢?要回答这个问题,先设想我们要在一个页面上定义文章的标题,通常我们有三个方法来实现这个简单目的: A.没有语义的标题定义: <span class="heading">文章标题</span> 虽然在某些情况下<span>会是一个方便的标签,但它并不能表达出标题的完整含义.采用这个方法的一个好处是,我们