`

网页对象内容自动换行控制方法

    博客分类：
  • PHP
IEFirefox浏览器CSSXHTML 
阅读更多
网页对象内容自动换行控制方法

对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
<div 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;}

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

效果：可以实现换行

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


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

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

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

对于table

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

<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>

效果：隐藏多余内容

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

<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果：可以换行

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


<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>

效果：隐藏多于内容

5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法
运行代码框
最后，这种现象出现的几率很小，但是不能排除网友的恶搞。

下面是提到的例子的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字符换行</title>
<style type="text/css">
table,td,th,div { border:1px green solid;}
code { font-family:"Courier New", Courier, monospace;}
</style>
</head>
<body>
<h1><code>div</code></h1>
<h1><code>All white-space:normal;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap still occurs in a td element that has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, even if the noWrap property is set to true. Therefore, the WIDTH attribute takes precedence over the noWrap property in this scenario</div>

<h1><code>IE word-wrap : break-word ;</code></h1>
<div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

<h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>table</code></h1>
<h1><code>table-layout:fixed;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>FF table-layout:fixed; overflow:hidden;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
</body>
</html>


来自：http://wenku.baidu.com/view/d05941d376eeaeaad1f330a1.html
分享到：
| CSS之自动换行
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html转pdf的core-renderer.jar支持中文自动换行

    `core-renderer.jar` 是一个专为此目的设计的Java库，它能够将HTML内容转换成PDF，并且针对中文字符提供自动换行功能，同时还能保留CSS样式，从而保持原始网页的视觉效果。 1. **HTML转PDF**: HTML是一种标记语言，...

    CSS 网页内容换行控制

    其中，文本的换行管理是CSS中不可或缺的一部分，尤其是在DivCSS布局中，良好的换行控制可以使得网页内容更加整洁、易读。本文将系统地介绍CSS中用于控制换行的四种主要属性：`white-space`、`word-break`、`word-...

    仿京东淘宝动态添加单选按钮并自动换行

    "仿京东淘宝动态添加单选按钮并自动换行"这个话题是关于如何创建一个类似电商平台的商品选项选择功能，用户可以根据需要动态地加载单选按钮，并且当单选按钮数量过多，无法在一行内展示时，它们能自动换行到下一行，...

    css控制文本实现越界省略号以及自动换行

    本篇将详细解释如何利用CSS实现文本的越界省略号显示以及自动换行。 首先，我们来看如何实现越界省略号的效果。这个效果通常用于长文本在有限的容器内无法完全展示时，用省略号(...)来表示文本被截断。关键的CSS...

    html5 canvas的绘制文本自动换行的示例代码

    HTML5的Canvas元素提供了一种在网页中绘制图形的手段，它基于...通过上述方法，即使***s的宽度固定，我们也可以根据内容自动换行来适配文本的绘制，从而使得在Web页面中使用Canvas元素时能够更好地控制文本的显示效果。

    html文件转pdf文件的jar包，非常实用，还能自动换行

    5. **自动换行**：描述中提到的“自动换行”功能，是指在转换过程中，jar包能自动处理文本溢出，确保内容在PDF页面内适应性地换行。这对于多列布局或者长文本段落尤其重要。 6. **字体兼容**：HTML可以引用各种在线...

    自动换行

    例如，通过获取元素的引用，如`document.getElementById`或`document.querySelector`，然后设置其`style`对象的`overflowWrap`属性，可以开启或关闭自动换行功能： ```javascript var element = document....

    extjs4.0desktop图标换行

    在深入探讨如何在ExtJS 4.0框架中实现Desktop桌面图标自动换行的功能之前，我们首先需要了解ExtJS框架的基本概念以及Desktop组件的作用。ExtJS是一个基于JavaScript的开源前端框架，它提供了一系列丰富的UI组件，使...

    div css nowrap无换行

    这使得列表项在容器宽度不足时自动换行到下一行。 在CSS中，`white-space`属性用于设置元素内空白字符的处理方式。它有三个值：`normal`（默认值，内容自动处理换行），`pre`（换行和其他空白字符都将受到保护，...

    ul li列表中显示文字强制不换行大于li宽度的文字自动隐藏

    在网页设计中，创建一个li列表并实现文字强制不换行，当文字内容超过li元素的宽度时自动隐藏，并在末尾添加省略号，是一种常见的文本显示方式，尤其在新闻列表、文章摘要等场景下。这种效果可以通过CSS样式来实现，...

    CSS盒子模型教程PPT课件.pptx

    块级元素是指浏览器显示时在该元素的前后会自动换行，因此多个块级元素不会排在一行。行内元素则默认显示在一行内，只有在最右端才自动换行。 7. 盒子模型的案例 盒子模型的案例包括调整网页中的对齐方式、理解...

    文本域自动适应高度

    在网页开发过程中，我们经常会遇到这样一个需求：当用户在文本域（`textarea`）中输入文字时，文本域的高度能够根据输入内容的多少自动进行调整，以达到更好的用户体验效果。下面将详细介绍实现文本域自动适应高度的...

    JavaScript的document和window对象详解

    - **writeln()**: 向文档写入文本，并自动换行。 #### Window对象 `window`对象是JavaScript中最顶级的对象，它代表浏览器窗口。几乎所有的全局函数、变量和对象都是`window`对象的属性或方法。 ##### 属性 - **...

    JSP 内置对象 （适用于有JSP基础的人员） 清华IT ppt

    JSP（Java Server Pages）中的内置对象是一组由Web容器自动创建并提供给开发者直接使用的对象。这些对象是JSP语言的核心组成部分，它们简化了开发过程，无需通过`new`关键字实例化。在JSP中，内置对象分为几个主要...

    Dreamweaver课件：第2章网页文本操作2.pptx

    综上所述，这一章的内容深入讲解了Dreamweaver中处理文本的各种技巧和方法，旨在帮助用户更好地创建和编辑网页文本，提升网页设计的专业性和用户体验。通过掌握这些知识，设计师可以更加自如地运用文本元素来构建...

    html对象属性大全

    3. **区断标记**：`&lt;hr&gt;`创建水平线，`size`、`width`和`color`分别调整其大小、宽度和颜色，` `用于换行，`&lt;nobr&gt;`阻止自动换行，`&lt;p&gt;`定义段落，`&lt;center&gt;`使内容居中。 4. **连结格式**：`&lt;base&gt;`设置页面...

    单选题[1]、一个网站中的多个网页之间是通过()联系起来的。【答案】B.pdf

    【CSS 样式表优点】CSS 不可以用来在浏览器的客户端进行编程来控制浏览器对象操作，创建动态效果（A），这是 JavaScript 或其他客户端脚本语言的功能。 【应用类样式】使用 Class（B）代码，可以将类样式应用于一段...

    网页代码上传啦!!!!!!!!

    37. **文字自动换行**：`word-wrap: break-word;` 和 `word-break: break-all;` 控制英文和中文字符的换行行为。 38. **透明IFRAME**：`&lt;IFRAME src="1.htm" width=300 height=180 allowtransparency&gt;&lt;/iframe&gt;` ...

    浅析css html span 块状不换行问题

    在Web开发中，CSS和HTML是构建网页布局的基石。在处理文本元素时，我们经常使用标签来对特定的文本进行...在设计网页时，我们需要根据具体内容和布局需求，合理选择display属性值，从而达到最佳的视觉效果和用户体验。

Magicbox
Global site tag (gtag.js) - Google Analytics