- 浏览: 196364 次
- 性别:
- 来自: 北京
最新评论
-
hncdcsm1:
非常给力,找了很久了,谢谢分享
99款高质量免费(X)HTML/CSS模板(转自blog.bingo929.com不错) -
yuying:
谢谢诶!
非常不错的CSS表单显示效果
转自:http://maymei.ycool.com/post.1696872.html
css之自动换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法
对于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>
word-wrap同word-break的区别
word-wrap:
normal Default. Content exceeds the boundaries of its container.
break-word Content wraps to next line, and a word-break occurs when necessary. 必要时会触发word-break。
word-break:
normal Default. Allows line breaking within words. 好像是只对Asian text起作用。
break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text.
keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.
总结如下:
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下,长串会被遮住部分内容。
另,测试代码如下:
1.htm===================================================================
<style>
.c1{ width:300px; border:1px solid red}
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
.c5{ width:300px;word-break:break-all; border:1px solid black}
.c6{ width:300px;word-break:keep-all; border:1px solid red}
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
</style>
.c1{ width:300px; border:1px solid red}
<div class="c1">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c1>
This is all English. This is all English. This is all English.
</div>
<div class=c1>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c1>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
<div class="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c2>
This is all English. This is all English. This is all English.
</div>
<div class=c2>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c2>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
<div class="c3">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c3>
This is all English. This is all English. This is all English.
</div>
<div class=c3>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c3>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
<div class="c4">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c4>
This is all English. This is all English. This is all English.
</div>
<div class=c4>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c4>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c5{ width:300px;word-break:break-all; border:1px solid black}
<div class="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c5>
This is all English. This is all English. This is all English.
</div>
<div class=c5>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c5>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c6{ width:300px;word-break:keep-all; border:1px solid red}
<div class="c6">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c6>
This is all English. This is all English. This is all English.
</div>
<div class=c6>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c6>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
<div class="c7">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c7>
This is all English. This is all English. This is all English.
</div>
<div class=c7>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class=c7>
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
今天做网站时,文章显示出了点问题:在表格显示文章时,中文可以自动换行,而英文不行,把TD撑变形了,所以在网上找资料研究了下.
首先对于一般的问题,我收集的资料如下:
发现对于英文字符,如果字母数字连在一起那么在表格中是不会自动分行的,除非用style="WORD-WRAP: break-word;"
WORD-WRAP的属性 微软说明如下
String that specifies or receives one of the following values.
normal ,Default. Content exceeds the boundaries of its container.
break-word ,Content wraps to next line, and a word-break occurs when necessary.
如果是中文,只要定了表格的宽度,一般是会自动换行的.
如果以上换行方法还是不可以,用style="word-break:break-all;"
如下这个方式
<td style="word-break:break-all;">
english english english english english english english english
english english english english english english english english english
english english english english english english english english english
</td>
word-break的属性 微软说明如下
String that specifies or receives one of the following values.
normal ,Default. Allows line breaking within words.
break-all ,Behaves the same as normal for Asian text, yet allows the
line to break arbitrarily for non-Asian text. This value is suited to
Asian text that contains some excerpts of non-Asian text.
keep-all ,Does not allow word breaking for Chinese, Japanese, and
Korean. Functions the same way as normal for all non-Asian languages.
This value is optimized for text that includes small amounts of Chinese,
Japanese, or Korean.
有三个值可以选择normal,break-all,keep-all上文已经很清楚的说明.
在帮助文件中有提到
When using the word-break attribute with a TABLE, you must set the table-layout property to fixed on the TABLE.
但是我觉得不用 也没有关系
比如
把<table>
替换为
<table cellpadding=0 cellspacing=0 width=100% style="TABLE-LAYOUT: fixed">
把
<td>
替换为
<td style="LEFT: 0px; WIDTH: 100%; WORD-WRAP: break-word; 130; 0pt">
任何在 <td>中的字母都会自动换行
但是table中的换不换好像差别不是很大
但是
现在有个问题,有时候需要自动换行,但是不希望把一个英文单词分成2行,那么怎么办呢,其实默认的时候中文英文都会自动换行的,对于英文不能换行的问题是
因为英文连在一起了,比如空格用 形成这个的字符串
english english english english
此时就不能执行自动换行的功能了,如果此时的 换成空格" "就可以自动换行
现在问题就好办了,只要替换" "为" "就可以,但是现在有个问题浏览器一般来说会把多个" "看成一个 "
"所以我们只需要换个 就可以了,否则的话原来的排版可能会出现问题,因此我用正则表达式替换 在字母前面的一个空白"
"来实现此功能
实现方法如下
str.replace(/ (?=\w)/ig," ");
就这么简单,现在测试英文会自动换行,而且不会被强行截断了
总结
在宽度固定的情况下,默认时中英文都可以自动换行的
而有时英文不能自动换行的原因是因为有 变成空白的原因
浏览器不把 看出单词的分界符号,所以不换行,用替换一个 为空白的方法可以实现原来的功能
具体js函数如下
<script language="JavaScript">
aa="english english english english"
document.write(aa);
document.write("<hr>");
function get_blank(str){
return str.replace(/ (?=\w)/ig," ");
}
document.write(get_blank(aa))
</script>
可以看出一般情况下,两个输出完全一致,而有表格的情况下,第二个输出会自动换行
发表评论
-
如何解决ps导出jpg或png文件过大的问题
2019-07-08 09:48 2657最近做图,忽觉存储文件过程中MAC奇慢无比,竟然发现存储出来 ... -
在线loading图标生成网站
2014-07-15 11:39 1232分享几个优秀的在线loading图标生成网站,方便实现。htt ... -
备忘录
2014-04-17 16:52 727text-shadow:0 1px 1px rgba(25 ... -
好设计的20条金律
2014-01-27 16:46 569可以打破规则,但不 ... -
转:5个设计师应该去的优质设计分享平台 [复制链接]
2012-08-28 16:16 829http://dribbble.com/ http://dr ... -
22个实用的在线配色网站
2010-11-22 09:21 1523如果感觉对色彩的把握还不是很到位,如果你的设计的时候色彩的感觉 ... -
ie6png透明
2010-11-08 22:19 853var arVersion = navigator.appVe ... -
div层遮盖flash(兼容浏览器)
2010-10-26 22:34 1032div层遮盖flash(兼容浏览器) 转自:htt ... -
(转)75个最佳Web设计资源,强烈推荐!
2010-10-03 21:14 888本文地址:http://www.woiweb.net/top- ... -
CSS实现自动等比例缩略图的方法
2010-10-02 15:30 1747完美解决自动缩略图的代码,以实现对原图的等比例收缩。 代码 ... -
针对Google Chrome谷歌浏览器的CSS hack
2010-09-14 13:26 3110所幸Google Chrome用的是与Safari一样的 ... -
解决不同浏览器窗口大小是否显示某DIV问题
2010-09-12 22:57 1038解决不同浏览器窗口大小是否显示某DIV问题: <SCR ... -
图片在DIV中居中
2010-05-07 17:20 1900图片在DIV中永远居中 <div id=&quo ... -
设定网页最小最大宽度和高度(兼容IE6)
2010-03-30 21:38 3049/* 最小寬度 */ .min_width{min-widt ... -
您需要了解的DIVCSS网页布局的8条面试题目
2010-01-26 10:03 870CSSer与其他IT职位一样,在找工作的时候,都会面临着面试官 ... -
转来的总结CSS规范
2010-01-25 15:33 968最近领导让整理个CSS规范做个内部培训,搜了搜资料,觉得这篇文 ... -
如何用css实现圆角_CSS实现圆角解决方案(转)
2010-01-14 18:22 2585导言: 本文探讨的是圆角框的终极解决 ... -
网页设计的3D元素运用25例
2010-01-12 22:23 744Yoast ... -
5种在设计中应用光线和阴影的简单技法 [转]
2010-01-12 22:14 715凡是你目光所及——光线和阴影无处不在。你看到的任何东西都反射回 ... -
第一次当站长
2009-04-14 09:07 943在玩开心网成瘾的过程里,我萌发了自己也倒腾一个SNS社区的想法 ...
相关推荐
1、解决HTML转pdf 中文、数字、英文不能换行的问题,修改的源码包 重新计算了右边距。 2、html转pdf 参考我的另外一篇博文https://blog.csdn.net/qq_38616723/article/details/125188407?spm=1001.2014.3001.5502
标题中的“Javascriptalfredworkflows自动驼峰式变量有道API中文转英文”涉及了多个技术领域,主要包括JavaScript编程、Alfred Workflows工具、驼峰式命名规则以及有道API的使用,特别是用于中文到英文的翻译。...
下面是一个具体的示例代码片段,演示了如何使用上述CSS属性来实现英文自动换行: ```html <!DOCTYPE html> <title>English Text Wrap Example div { width: 110px; background: #000; color: #fff; ...
在描述的场景中,"pb数据窗口自动折行函数"是一个针对数据窗口对象的定制化功能,主要目的是解决在打印时编号、款号等含有英文或数字连续字符串的折行问题,特别是在这些字段没有空格分隔时。 通常,当数据窗口内的...
《自动断浇口支架注射模设计》是一份深入探讨机械设计领域的毕业设计论文,主要聚焦于塑料制品生产中的注塑工艺。注塑模具是塑料成型加工中的关键工具,而自动断浇口支架注射模则是其中一种高效且智能化的模具类型。...
在数据处理过程中,有时我们需要将数据从行格式转换为列格式,或者反之,这被称为“行转列”或“列转行”。在Kettle中实现这一功能,可以通过“Row to Column”或“Column to Row”步骤来完成。 在本文中,我们将...
总之,处理MySQL连接闪断并实现自动重连是一个关键的错误恢复策略,它确保了应用程序在面对网络问题时仍能保持服务连续性。通过合理的设计和编程实践,我们可以构建出健壮的数据库连接管理机制。
解决HTML转pdf 中文、数字、英文不能换行的问题,修改的源码包 重新计算了右边距
在Android应用开发中,自动更新功能对于保持应用的最新状态和修复潜在问题至关重要。"安卓app自动更新,一行代码搞定,最新开源库"这个标题所指的,就是一种简化了自动更新流程的方法,它利用特定的开源库,使得...
在IT行业中,LaTeX是一种广泛使用的排版系统,尤其在学术界和科研领域,它以其强大的公式排版、复杂...总的来说,这份模板是自动化领域研究人员进行学术交流的一个有力工具,它简化了论文写作的流程,提高了工作效率。
因此,解决自动关机问题是服务器管理员的重要任务之一。本文将详细介绍解决 2008 R2 服务器每隔一段时间就自动关机的问题。 什么是 WLMS 进程? 在解决自动关机问题之前,我们需要了解 WLMS 进程的作用。WLMS...
在Android开发中,"多个view自动换行"通常是指在一个布局容器中,当视图(View)数量过多,无法在一行内显示时,系统能够自动将它们换行展示,以适应不同的屏幕尺寸和布局需求。这涉及到对ViewGroup的管理和布局管理...
在FastReport报表设计中,中文折行问题是一个常见的困扰,特别是在使用frmemo控件时。FastReport是一款功能强大的报表设计工具,广泛应用于Windows应用程序中,用于生成各类报表。然而,由于编码、字体以及控件设置...
在 Weblogic 中,连接池配置数据库断掉重连是一个非常重要的问题。连接池配置是 Weblogic 中的一种机制,用于管理与数据库的连接。然而,在实际应用中,我们经常会遇到连接池配置数据库断掉的问题,这将导致应用程序...
本文基于一篇2008年的英文文献《Software Test Automation》(作者:Oliver Tuschling),探讨了自动化测试的基本原理、优势以及在复杂多环境系统中的应用。 #### 二、自动化测试概述 自动化测试是指通过使用特定的...
在探讨“解决DrawText中文字与字母之间自动换行”的问题时,我们首先需要理解DrawText函数的基本概念及其在Windows编程中的应用。DrawText是一个Windows API函数,用于将文本绘制到指定的矩形区域,同时提供了多种...
在这过程中,继电器的动作实际上是对电源线路进行切换,从一个电压等级切换到另一个电压等级,使得焊机可以在不同的供电环境下稳定工作。 文档中提到了整流桥,整流桥是一个将交流电(AC)转换为直流电(DC)的装置...
自动化专业英语是面向自动化领域的专业人士或学生的一门特殊语言课程,旨在提升他们在阅读、写作、听力和口语方面处理英文技术资料的能力。这门学科涵盖了自动化技术中的关键术语、概念和设备,例如控制系统、传感器...
在这个特定的案例中,结合描述和压缩包内的文件名,我们可以推测这是一个关于电子政务在蒸汽地拖设备安全管理方面的应用。 描述中的“一种蒸汽地拖断电自动断水阀门”指的是一个自动化系统,当蒸汽地拖设备电力供应...
《自动化专业英语教程全文翻译》是一份非常宝贵的资源,它为学习自动化领域的专业人士提供了一条通向英语技术文献理解的捷径。这份教程包含了PDF和DOCX两种格式,旨在帮助读者提升专业英语阅读和理解能力,同时加深...