CSS3 文本效果 |
您所在的位置:网站首页 › css文字逐个出现 › CSS3 文本效果 |
❮ 上一节
下一节 ❯
CSS3 文本效果
CSS3 文本溢出、整字换行、换行规则以及书写模式
在本章中,您将学习如下属性: text-overflow word-wrap word-break writing-mode CSS3 文字溢出CSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容。 可以被裁剪: This is some long text that will not fit in the box 也可以将其呈现为省略号(...): This is some long text that will not fit in the box CSS 代码如下: 实例 p.test1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; }p.test2 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; } 亲自试一试 »下面的例子展示了将鼠标悬停在元素上时如何显示溢出的内容: 实例 div.test:hover { overflow: visible;} 亲自试一试 » CSS3 字换行(Word Wrapping)CSS word-wrap 属性使长文字能够被折断并换到下一行。 如果一个单词太长而无法容纳在一个区域内,它会向外扩展: This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line. 通过 word-wrap 属性,您可以强制对文本进行换行 - 即使这意味着在词中间将其拆分: This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line. CSS 代码如下: 实例允许长单词被打断并换行到下一行: p { word-wrap: break-word;} 亲自试一试 » CSS3 换行规则CSS word-break 属性指定换行规则。 本段包含一些文本。 此行将在连字符处中断。 本段包含一些文本。 换行会在任何字符处中断。 CSS 代码如下: 实例 p.test1 { word-break: keep-all;}p.test2 { word-break: break-all;} 亲自试一试 » CSS3 书写模式CSS writing-mode 属性规定文本行是水平放置还是垂直放置。 一些带有 span 元素的文本,其书写模式为 vertical-rl。 下面的例子展示了一些不同的书写模式: 实例 p.test1 { writing-mode: horizontal-tb; }span.test2 { writing-mode: vertical-rl; } p.test2 { writing-mode: vertical-rl; } 亲自试一试 » CSS3 习题和测验 测验 1 » 测验 2 » 测验 3 » CSS3 文本效果属性下表列出了 CSS 文本效果属性: 属性 描述 text-align-last 指定如何对齐文本的最后一行。 text-justify 指定对齐的文本应如何对齐和间隔。 text-overflow 指定应如何向用户呈现未显示的溢出内容。 word-break 指定非 CJK 脚本的换行规则。 word-wrap 允许长单词被打断并换到下一行。 writing-mode 指定文本行是水平放置还是垂直放置。 ❮ 上一节 下一节 ❯ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |