当前位置:园子博客 » 网站应用 » 如何使网页布局中输入连续字符强制换行

如何使网页布局中输入连续字符强制换行

8月 21st, 2010 | Filed under 网站应用 | 共有7,957次浏览

在网页设计中,一般情况下我们会对一些内容定义固定宽度,然后通过程序输出诸如网友评论之类的内容。这个时候如果网友在提交评论时输入的内容是一连串叹号或省略号的话,即使是你固定了总宽度,还是不能让这些连续的字符自动换行。本文就分享下使网页布局中输入连续字符强制换行的解决方案

先来看看通过普通的css定义所输出的示例图片:

一般固定宽度的网页排版效果

一般固定宽度的网页排版效果

通过图片我们可以看到当DIV中的内容如果是重复的字符的话,即使你定死了宽度,这些字符还是会跑到外面去。造成这样显示的原因是浏览器把这些连续的字符当成了类似于一个英文单词对待了,所以会超出所定义宽度的显示范围。

上图示例所使用的HTML代码如下:

1
2
<div class="box1"> 园子博客是一个关注互联网和WordPress的IT博客。这里分享的内容有:Wordpress 使用技巧与插件介绍,网站优化与推广,web标准的学习与应用,Google Adsense优化技巧,CSS、XHTML在网页中的应用以及一些非常酷的软件等等。 </div>
<div class="box1"> 园子博客是一个关注互联网和WordPress的IT博客。!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>

CSS 样式如下:

1
2
3
4
5
6
7
.box1 {
	font-size: 12px;
	width: 400px;
	padding: 10px;
	border: 1px solid #CCC;
	margin-bottom: 10px;
}

网页布局中输入连续字符强制换行的方法

方法也很简单,使用 CSS 的 word-wrap:break-word; 属性即可。你只需要在CSS样式中加入如下代码:

1
word-wrap:break-word;

通过这个属性可以定义文档依照亚洲语言和非亚洲语言的文本规则,允许在字内换行,且允许非亚洲语言文本行的任意字内断开。

通过使用此样式定义后文档显示效果如下:

使用了 word-wrap 属性后的排版显示效果

使用了 word-wrap 属性后的排版显示效果

此时完整的CSS样式如下:

1
2
3
4
5
6
7
8
.box1 {
	font-size: 12px;
	width: 400px;
	padding: 10px;
	border: 1px solid #CCC;
	margin-bottom: 10px;
	word-wrap:break-word;
}

其实我们在设计中经常会遇到这种情况,比如在设计网友评论的时候,一般情况下都是固定宽度的,而我们不可能通过复杂的程序来控制用户输入什么字符。在这个时候记得通过 CSS 的 word-wrap 属性来控制网页布局中输入连续字符强制换行

  1. 亿品元素
    9月 7th, 201013:28

    可怜,在IE6下,严重杯具

  2. 亿品元素
    9月 7th, 201013:27

    我来试试啊!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  3. 天缘
    9月 4th, 201015:21

    这个我用过效果是没问题,但是似乎是不符合W3C标准的?

  4. 站长实验室
    8月 27th, 201016:13

    学习了,还有这样的方法啊,用CSS就可以实现

  5. oogps
    8月 24th, 201008:55

    大家都知道过不了W3C?

  6. 法国jojo
    8月 23rd, 201016:01

    不错,学习了

  7. A.shun
    8月 23rd, 201015:57

    一般都要限制宽度的

  8. 快乐的村长
    8月 23rd, 201015:07

    这是个有趣得东东,一般也写不那么多评论啊,嘿嘿

  9. 杭州纹身
    8月 23rd, 201014:44

    特效还是少点好

  10. 先看看
    8月 23rd, 201014:32

    飘多了不好看哦

  11. 北街
    8月 23rd, 201012:58

    嗯,这个功能确实不错~ 😀

  12. 村官日志
    8月 23rd, 201012:02

    限制宽度就OK了,谢谢分享。

  13. 陈剑
    8月 23rd, 201011:20

    CSS不是有这个功能能自动让它处理吗,怎么还要强制

  14. 右脑开发
    8月 23rd, 201010:40

    挺不错的 方法 哈哈

  15. 智力开发产品
    8月 23rd, 201009:47

    恩,学习了,谢谢分享,O(∩_∩)O哈!

    • 雅岚
      8月 23rd, 201010:00

      这句话真万能。。。
      四处可见,阴魂不散。。。

  16. 学夫子
    8月 23rd, 201007:48

    看一下朋友,祝朋友新的一天事事顺心

  17. 河北博客
    8月 22nd, 201021:38

    很实用!

  18. 博客之星
    8月 22nd, 201020:31

    还没碰到个此情况,但肯定要加上这句代码。

  19. 煮茶老头
    8月 22nd, 201019:44

    这个不错,前面我好像在谁的博客中就碰到了这个问题……

  20. 软件盒子
    8月 22nd, 201018:06

    这个我现在用不到,呵呵

  21. Bee君
    8月 22nd, 201014:44

    word-wrap:break-word;好像对英文字母也可以的~,不过半角跟全角好像有点奇怪的…断得不太好看 = =

  22. 阿七
    8月 22nd, 201014:12

    如果能对排版支持更好点就好了。就是自动换行的时候中文和英文之间不空一大片。

    • 园子
      8月 22nd, 201015:45

      @阿七
      不一片空白会把英文单词拆开显示
      这样仍然是个问题。

  23. zwwooooo
    8月 22nd, 201013:15

    不过这个属性w3c不通过,当然可以无视w3c,呵呵

  24. 黄伟涛
    8月 22nd, 201011:06

    在CSS 里面加入代码,学习了

  25. 学夫子
    8月 22nd, 201010:48

    这个倒是没有注意过,我这个人很懒,直接用官方做好的,哈哈

  26. 书香阁
    8月 22nd, 201010:09

    学习一下哦

  27. Ebo
    8月 22nd, 201009:54

    学习下。

  28. 咖啡因
    8月 22nd, 201003:34

    悲剧,可惜不会CSS

  29. 记忆盒子
    8月 22nd, 201002:10

    呵呵!word-wrap:break-word;对一连串的英文字母是没有办法的。

    • 园子
      8月 22nd, 201009:35

      @记忆盒子
      可以用的,你可以试试看。在 DW 的视图模式下显示是超出了,但预览会自动换行的。

  30. 记忆盒子
    8月 22nd, 201002:09

    iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

  31. 观尔腾
    8月 21st, 201023:56

    学习了~但总觉得懒得改~

  32. 七叶草
    8月 21st, 201023:35

    WP的格式对中文还是不太友好,有时候看起来不舒服

  33. Code之行人
    8月 21st, 201023:02

    我一直想知道,你的广告怎么弄的可以靠右边放置,需要哪些CSS

  34. 飞晏
    8月 21st, 201022:50

    好久不摸CSS了 看了半天才看得懂

  35. 奶牛
    8月 21st, 201022:47

    吼吼,又学习咯~~~ 😛

  36. 创享·生活
    8月 21st, 201022:15

    原来我主题有这样的问题,不知道我的css代码应该插入到哪里呢??请教 一下,呵呵

  37. 创享·生活
    8月 21st, 201022:11

    这个分享非常的好。我马上去检查一下这个主题有没有这个问题呢。不过应该没有人这么无聊来这样留言,呵呵

    • 园子
      8月 22nd, 201009:37

      @ 创享·生活
      我就是碰到了才会这样去解决,哈哈。

    • 园子
      8月 22nd, 201009:37

      @创享·生活
      我就是碰到了才会这样去解决,哈哈。

  38. 雅岚
    8月 21st, 201021:43

    噢?酱紫丫。。。。
    让我来试一试,吼吼。。。。。。。。。。。。。。。。。。。。。
    妖。。。。。。女。。。。。。。。。。。。。。岚。。。。。。。。。。。。。。。。。。。。。。。。。。来。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。啦。。。。。。。。。。。。。。。。。。。。

  39. ifenwen
    8月 21st, 201021:19

    这个的确没有注意过 看来css的学问很大啊

  40. 自由人
    8月 21st, 201020:18

    这个还真没注意过

  41. reizhi
    8月 21st, 201019:52

    不错,确实很好

  42. joyla
    8月 21st, 201017:43

    这个记住了 在CSS 里面加入代码实现限宽!

  43. joyla
    8月 21st, 201017:42

    我沙发!

您必须在 登录 后才能发布评论.