`
jianzong2000
  • 浏览: 56072 次
  • 性别: Icon_minigender_1
  • 来自: 南京
文章分类
社区版块
存档分类
最新评论

html常用的换行控制

 
阅读更多

text-overflow: clip | ellipsis
clip :  不显示省略标记(...),而是简单的裁切
ellipsis :  当对象内文本溢出时显示省略标记(...)。
需要配合white-space:nowrap使用。为了使 ellipsis 值被应用,此属性必须被设置到具有不可视区域的对象。最好的选择是设置 overflow 属性为 hidden 。设置 overflow 属性为 scroll 或者 auto 时,此属性也会应用。但是会有滚动条出现。

 

white-space : normal | pre | nowrap
设置或检索对象内空格字符的处理方式。

#####normal : 默认。文本自动break。内容拆到下一行,如果超过这个对象的宽度。
nowrap :  强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。

Whitespace, such as line breaks, spaces, and tabs, is collapsed by default in HTML documents。

 

normal 
     A value of normal dictates that sequences of whitespace will collapse into a single space character.

     Line breaks will occur wherever necessary to fill line boxes.
nowrap
     Specifying nowrap ensures that sequences of whitespace will collapse into a single space character,  but line breaks will be suppressed.
pre
     Specifying pre ensures that sequences of whitespace won’t collapse. Lines are only broken at new lines in the markup (or at occurrences of "\a" in generated content).

即normal和nowrap会把4个空格变成一个空格。而pre不会,pre显示原始的内容。

http://reference.sitepoint.com/css/white-space

 


word-break : normal | break-all | keep-all
最常用的控制换行属性,常与word-wrap结合使用。对于中文,应该使用 break-all

normal:默认。允许在词内换行。

break-all:对于亚洲文件和normal相同,然而允许非亚洲文本武断的换行。这个值适用于,亚洲文本中包含一些摘录的非亚洲文本。

keep-all: 不允许亚洲文本词内换行。对非亚洲文件和normal相同。这个值为文本中包含少量的亚洲字符进行优化。


word-wrap : normal | break-word
normal:默认值。允许内容顶开指定的容器边界
break-word:内容将在边界内换行。如果需要,词内换行( word-break )也将发生


你想在限制宽度里仅显示一行文字,而这行文 字的长度却超过这个宽度,结合white-space+text-overflow可以达到更好的效果。

http://www.aspxhome.com/design/css/20097/946816.htm

 

 

分享到:
评论

相关推荐

    html中表格td内容自动换行

    今天,我们将讨论如何使用 CSS 来控制 TD 中的换行。 强制不换行 在 IE 的 TD 中,如果我们没有指定宽度,使用 `white-space: nowrap;` 可以实现强制不换行。但是,如果我们为 TD 指定了宽度,并且文字中无标点、...

    html中的div、td 、p 等容器内强制换行和不换行的实现

    在HTML中,`div`、`td` 和 `p` 等元素作为常见的容器,经常用于组织和展示页面内容。对于这些容器内的文本换行处理,可以通过CSS样式来实现。这里我们将详细讨论如何实现强制不换行以及自动换行,并分析不同换行方式...

    html 自动换行

    - `word-break: break-all`是一个CSS属性值,主要用于控制文本中的单词如何换行。 - 当容器宽度不足以显示整个单词时,此属性会允许浏览器将单词拆分成两部分来实现换行,即使这意味着拆分中间的单词。 - 这种...

    html代码实现文字转图片的代码,自动换行

    我们使用了html2canvas库将id为text的div元素转换为canvas元素,并将canvas元素转换为...同时,我们使用了CSS样式控制文字的换行。最后,我们在页面上添加了一个按钮,点击按钮即可将文字转换为图片并显示在页面上。

    CSS 网页内容换行控制

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

    控制jEditorPane和jTextPane换行的演示程序

    在这个特定的程序中,我们看到的是一个演示如何控制这两类组件换行特性的应用。`JEditorPane`通常用于显示HTML或其他格式的富文本,而`JTextPane`则提供了更多的格式化选项,如插入图片或样式化的文本。 换行在文本...

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

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

    gridview一般换行,强制换行

    通过对`GridView`中一般换行与强制换行机制的理解和实践,我们可以更好地控制文本的显示效果,提升用户体验。根据具体需求选择合适的方式,并注意代码的执行效率和浏览器兼容性,是实现良好视觉效果的关键。

    GridView一般换行与强制换行

    这两个属性可以控制文本在何处和何时换行,提供了一种更灵活的解决方案。 - **`word-break: break-all;`**:此属性会强制在单词内部进行换行,即使单词本身很长也不会被拉伸到超出容器的宽度。这对于长英文单词或...

    jsp页面Table自动换行

    【标题】"jsp页面Table自动换行"涉及的是在JavaServer Pages (JSP) 技术中处理HTML表格(Table)的布局问题。在网页设计中,表格的换行通常是由于表格内容过多,超过了容器(如div或浏览器窗口)的宽度,导致表格...

    关于Textarea的换行问题

    此外,这也展示了在Java Swing框架中,如何通过编程手段控制组件的行为,包括换行和滚动条的显示,以及如何响应用户界面状态的变化。 值得注意的是,虽然这段代码提供了在Java环境中处理TextArea换行问题的一个具体...

    button自适应高度和自动换行

    若希望按钮内容自动换行,可以去掉这些替换,或者使用CSS的`word-break`属性控制单词断行。 2. CSS多列布局:使用`column-count`或`column-width`属性可以将按钮内容分到多列显示,达到自动换行的效果。但这种方法...

    Asp.Net中文本换行

    在VB.NET中,文本换行通常涉及到对字符串的处理,具体来说,就是将文本中的换行符(如`Chr(10)`)转换为HTML的换行标签`<BR>`,或者将连续的换行符转换为段落标签`</P><P>`。这种方法的优点在于能够保持原始文本的...

    英文自动换行怎样解决

    #### 二、CSS中的换行控制属性 在CSS中,有几种属性可以用来控制文本的换行行为,包括`word-wrap`和`word-break`等。这些属性可以帮助我们更好地管理文本的显示方式,尤其是在需要限制元素宽度的情况下。 ##### 1....

    CSS 文字自动换行

    表格是网页布局中常用的一种结构,对于表格中的文本换行,CSS提供了更多灵活的控制方式。 - **`table-layout: fixed;`**:设置表格布局为固定宽度模式。这意味着每个单元格的宽度将根据其定义的宽度或者默认宽度来...

    DIV CSS 图片自动换行

    对于图片自动换行,最常用的方法是使用 `display: flex;` 或 `display: grid;`。这里,`grid` 模式在处理多列布局时尤其有效,可以轻松实现图片的自动换行。 例如,在 `grid.css` 或 `style.css` 文件中,我们可以...

    Asp.Net中文本换行.rar

    首先,我们要了解在HTML中,换行符通常会被忽略,一行中的连续文本会被显示在同一行上,除非使用特定的HTML标签或CSS样式来控制换行。在Asp.Net中,我们主要使用两种方式来处理文本换行:HTML标签和C#代码。 1. **...

Global site tag (gtag.js) - Google Analytics