`
ppjava
  • 浏览: 138948 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

CSS 强制换行和禁止换行

 
阅读更多

 

 

强制换行
      1、word-break: break-all;       只对英文起作用,以字母作为换行依据。
      2、word-wrap: break-word;   只对英文起作用,以单词作为换行依据。
      3、white-space: pre-wrap;     只对中文起作用,强制换行。

禁止换行
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;



Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,用IE6浏览时,常看到内容错位,非常影响网站的美观。另一方面,对二分栏结构的网站,在侧栏放一些文章标题时,如果标题过长它又是自动换行的,也影响版面的美观。

      在CSS里,主要有强制换行和禁止换行。

一、强制换行

      1、word-break: break-all;       只对英文起作用,以字母作为换行依据。
      2、word-wrap: break-word;   只对英文起作用,以单词作为换行依据。
      3、white-space: pre-wrap;     只对中文起作用,强制换行。

      word-break:break-all 和 word-wrap:break-word都是能使其容器如DIV的内容自动换行,它们的区别在于:

1、word-break:break-all

      假设div宽度为450px,它的内容就会到450px自动换行,如果该行末端有个很长的英文单词,它会把单词截断,一部分保持在行尾,另一部分换到下一行。

2、word-wrap:break-word 

      例子与上面一样,但区别就是它会把整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉。

      各自的效果演示如下:

<div style="width:450px; word-break: break-all;">
      Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。
</div>

Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。

<div style="width:450px; word-wrap: break-word;">
      Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。
</div>

Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。

<div style="width:450px; white-space: pre-wrap;">
      Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。
</div>

Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文JimdoJimdo或数字字串(比如网址)时,没有设置强制换行,造成页面被撑破,内容错位,非常影响网站的美观。

      呵呵,我们看到的效果,好象并不是所说的那样,可能是现在浏览器的版本不同了吧。一般地说,对于强制换行,用word-wrap: break-word; 就可以了。

二、禁止换行

      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

      white-space:nowrap; 是禁止换行。

      overflow:hidden; 是让多出的内容隐藏起来,否则多出的内容会撑破容器。

      text-overflow:ellipsis; 让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器,Opera浏览器用-o-text-overflow:ellipsis; 而Firefox浏览器没有这个功能,多出的内容只能隐藏起来。

      下面看下效果演示:

      <div style="width:455px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; ">

text-overflow:ellipsis; 让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器,Opera浏览器用-o-text-overflow:ellipsis; 而Firefox浏览器没有这个功能,多出的内容只能隐藏起来。

      </div>

三、CSS换行代码在Jimdo上的应用

1、强制换行

      关于Jimdo上强制换行的问题,诸葛草帽已经很好地解决了这个问题,感兴趣的朋友可以去看一下,具体地址: http://zhugecaomao.jimdo.com/2010/09/06/jimdo-skill-comment-bolg/。

2、禁止换行

      禁止换行主要用于分栏结构的模板,在侧栏上添加一些标题性的内容时,有时内容过多换行反而显得不美观,如我这个侧栏上的“博文导读”就是这样:

      另外,有的朋友喜欢在侧栏上用“RSS Feed”调用最新博文,也会出现同样的问题,如下图:

      下面就来讨论一下解决的方法。

      我这个“博文导读”是手工编辑的,用的是UL列表,在CSS对它进行了设置,在页面上修改内容相当方便。要对它禁止换行,只要在CSS里修改一下li即可,具体代码是:

li {float:left; line-height: 22px;padding-left:0px;width:235px; white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow:hidden;}

      主要是添加了红色代码,其中width:235px要根据具体版面进行修改。

      对于“RSS Feed”,可以采用同样的方法进行修改,在CSS里添加以下代码即可:

.rssFeed{width: 235px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;}

      修改以后的效果如下图:

      如果采用的是系统模板,不方便对CSS直接进行修改的话,可以将上CSS代码加到网页的“HEAD”中,效果是一样的,具体方法是:

<style type="text/css">
<!--
CSS代码
-->
</style>

      感兴趣的朋友还可以参考一下 浅谈Jimdo系统模板的修改与自定义(二) - 通过CSS修改与美化Jimdo网站,不清楚的地方也可以留言,我会尽力回复。

分享到:
评论

相关推荐

    css强制换行 css强制不换行的css方法

    在本文中,将讨论CSS中的换行控制技术,特别是如何使用CSS强制实现文本换行或阻止换行。这在网页设计和布局过程中非常重要,尤其是在处理表格、列表或其他需要精确控制文本流动的元素时。 首先,了解`word-break`...

    CSS自动换行

    3. **单元格内部强制换行(IE/Firefox)** - 对于需要在单元格内部换行的情况,可以结合使用`white-space: nowrap;`和`word-wrap: break-word;`或`word-break: normal;`。 - 示例代码: ```css td { white-...

    基于javascript的在火狐里面强制换行字符

    在火狐浏览器中,有时会出现无论CSS样式如何设置,都无法正常实现文本的强制换行。这可能是由于火狐浏览器在处理特定元素的换行属性时存在某些问题或者BUG。为了解决这一问题,可以通过JavaScript(JS)脚本来强制...

    CSS控制文字换行、裁剪

    在CSS中,对文字的换行和裁剪的控制是一项重要的布局技巧,它能帮助我们更好地组织和展示网页内容。本文将深入探讨CSS中的几个关键属性,包括`word-wrap`、`word-break`、`white-space`以及如何实现文字溢出时显示...

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

    总结来说,CSS中的`text-overflow: ellipsis`、`overflow: hidden`和`white-space: nowrap`等属性是实现文本越界省略号的关键,而`word-break`属性则用于控制文本的换行行为。对于表格,需要结合`table-layout: ...

    html、css 禁止文字自动换行属性word-break

    在给定的标题和描述中,提到的是如何使用`word-break`属性来禁止文字自动换行。 `word-break`属性有以下几个可选值: 1. `normal`:这是默认值,遵循浏览器的默认换行规则,通常在单词内部不会强制断行,除非单词...

    爱情树网页,音乐自动播放及自动换行

    可以使用` `标签来实现强制换行,或者使用CSS的`word-wrap`属性: ```html ;"&gt;这是一个非常非常非常非常非常长的单词,如果没有word-wrap属性,它将会溢出容器,但是现在它会自动换行。 ``` 另外,如果想要在...

    css书写代码要求规范

    - **4个空格缩进**:[强制] 使用4个空格作为一个缩进层级,禁止使用2个空格或Tab键。这有助于保持代码的一致性和清晰度。 ```css .selector { margin: 0; padding: 0; } ``` ##### 2.3 空格 - **选择器与{**...

    html td nowrap不换行属性使用方法

    这不仅可以控制文本的换行行为,还可以与其他CSS样式结合使用,实现更灵活的布局和设计。例如,可以使用`overflow`属性来处理单元格内容溢出的情况,或者使用`text-overflow`来定义文本溢出时的显示方式。

    CSS学习之CSS网页制作的10个技巧

    学习ccs和制作网站当中遇到的一些疑问,整理的一些笔记. 1.marquee 滚动样式是IE独有的,FF不支持 2.css中的filter效果是IE的私有属性,同样所有的非...5.禁止内容换行与强制内容换行 在表格或层中我们可能希望内容不换

    CSS 教程之内容设置的一些语法

    normal值允许内容超出指定的容器边界,而break-word则会在边界内强制换行。当一行文本超过了容器宽度,且没有合理的位置进行换行时,使用break-word可以防止布局错乱。 最后,我们来讨论overflow属性。虽然它不是一...

    CSS 使用规则总结

    - 强制换行:`word-break: break-all;` 这会使得较长的单词在达到容器边界时自动换行。 六、相对定位(relative)与绝对定位(absolute)的区别 在CSS的定位属性中,relative和absolute是常用的两种定位方式: - ...

    html常用标记

    换行与水平线,分别用于强制换行和创建水平分隔线。 #### 32. `&lt;blockquote&gt;` 和 `&lt;/blockquote&gt;` 引用块,用于表示较长的引用内容。 #### 33. `&lt;dl&gt;`, `&lt;dt&gt;` 和 `&lt;dd&gt;` 定义列表,`&lt;dl&gt;`包含一组定义项和定义...

    爱淘课html网页属性[归纳].pdf

    5. **段落和换行**:`&lt;p&gt;`定义段落,` `用于强制换行。`&lt;nobr&gt;`阻止文本自动换行。 6. **标题标签**:`&lt;h1&gt;`至`&lt;h6&gt;`定义不同级别的标题,`&lt;h1&gt;`最大,`&lt;h6&gt;`最小,`align`属性可调整标题对齐方式。 7. **样式...

    CSS实现限制字数功能当对象内文本溢出时显示省略标记

    在实现文本溢出省略号功能时,我们通常将其设置为 `nowrap`,这将强制文本在同一行内显示,不允许换行。 ```css white-space: nowrap; ``` `overflow` 属性则用来处理元素内容超出其边框的情况。在这里,我们需要...

    26个常用易忘CSS小技巧

    - **强制换行**:`word-break: break-all;` 5. **文本两端对齐**: 使用`text-align: justify;`实现两端对齐,同时可以使用`text-justify`和`text-align-last`来控制不同浏览器下的效果。 6. **文字竖向排版**:...

    详解纯css实现瀑布流(multi-column多列及flex布局)

    其中,auto不强制也不禁止元素内的页/列中断;avoid、avoid-page、avoid-column和avoid-region则分别表示避免元素内的分页符、列中断和区域中断。 通过合理配置上述属性,可以使用multi-column属性创建出瀑布流的...

    HTML代码.txt

    - ` `:换行符,用于强制换行而不形成一个新的段落。 - `&lt;center&gt;`:使内容居中显示,但现代HTML中建议使用CSS进行布局控制。 - `&lt;p&gt;`:段落标签,用于组织文本内容。 ### 三、链接与图像标签 - `&lt;a&gt;`:超链接...

    html特效代码大全.pdf

    16) **换行**:` `标签用于强制换行。 17) **段落**:`&lt;p&gt;`标签定义了一个段落。 18) **原始文字样式**:`&lt;pre&gt;`标签保留预格式化的文本,保持空格和换行。 19-20) **帖子背景**:`&lt;body&gt;`标签的`background`...

Global site tag (gtag.js) - Google Analytics