css3之文本text-overflow 与 word-wrap, word-break

CSS3 Text Overflow属性

CSS3文本溢出属性指定应向用户如何显示溢出内容

语法:

text-overflow:clip  |  ellipsis

但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下:

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

效果:

CSS3的换行

如果某个单词太长,不适合在一个区域内,它扩展到外面:

CSS3中,自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字:

语法:

word-wrap:break-word;

CSS3 单词拆分换行

CSS3 单词拆分换行属性指定换行规则:

CSS代码如下:

p.test1
{
    width:9em;
    border:1px solid #000000;
    word-break:keep-all;
}

p.test2
{
    width:9em;
    border:1px solid #000000;
    word-break:break-all;
}

引:http://www.runoob.com/css3/css3-text-effects.html

时间: 2024-12-24 02:50:34

css3之文本text-overflow 与 word-wrap, word-break的相关文章

CSS3新增文本属性详述

CSS文本属性复习 1.white-space:对象内空格的处理方式 2.direction:文本流的方向 3.unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示.与direction属性一起使用 1.white-space:对象内空格的处理方式 nowrap 控制文本不换行 pre 空白会被浏览器保留 normal 默认状态 pre-line 合并空白 保留换行符 pre-wrap 保留空白 正常换行 nowrap经常配合text-overflow一起使用,使得超出部分显示

CSS3新增文本属性实现图片点击切换效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词"> <meta name="Description" content="描述"> <title>CSS3新增文

CSS3新增文本属性

CSS2中常用的属性: text-indent:首行缩进: vertical-align:垂直对齐方式: white-space:空格处理方式: line-height:设置行高: CSS3新增文本属性: text-overflow: clip:溢出的部分裁切掉: ellipsis:显示省略标记(...)  //该属性需要和over-flow:hidden属性(超出处理)还有white-space:nowrap(禁止换行)配合使用,否则无法看到效果. text-align: 原有属性:left

CSS3的文本特性

CSS3 文本 在Web页面或者Web应用程序中设置文本样式是CSS最基本的要求, 早期的CSS文本功能就是给Web页面设置文本的字体.字号.颜色.样式.粗细.间距等. 随着CSS3的出现,文本功能不仅仅局限于这些基本的运用,它给文本功能添加了一些高级的属性设置, 如文本阴影属性text-shadow.文本自动换行属性word- break. 长单词与URL地址自动换行属性word-wrap和文本溢出属性text-overflow等,在 CSS文本功能上主要分为三大类: 字体. 颜色和文本,te

使用CSS3改变文本选中的默认颜色——张鑫旭

关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3.6浏览器: 在CSS3的爸爸妈妈还没有相亲认识的时候,要改变页面上文字选中后的背景色以及文字颜色,就跟让太监生孩子一样困难.但是,随着CSS3呱呱落地,获得越来越多的浏览器认可,一切又显得那么自然而然.虽然有些顽固的糟老头(如IE浏览器)还不认可这个新生的CSS3,但是,丝毫不影响其在其他浏览器上对

word break和word wrap

默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(normal | break-word):表示是否要断词 word wrap break-word   [要断词] 独占一行(默认情况下单词太长就会被换到下一行去,所以就独占一行了)的单词被断开成多行, 默认值normal,则不断词,而是一行显示,超出容器 word break break-all:和上面相比

css3美化文本框提示特效代码下载

原文:css3美化文本框提示特效代码下载 源代码下载:http://www.zuidaima.com/share/1550463334386688.htm 源代码截图:

JavaFX学习之道:文本Text及其特效

原文地址http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm 文本讲述如何在JavaFX2.0应用中加入文本和如何为文本提供花俏的效果. 引子 JavaFX 2.0应用的图形内容包含一些对象,它们被组织在一个成为场景图的类树结构中.场景图中的每个元素成为一个结点,结点可以管理很多不同种类的内容,包括文本.结点可以转换和移动,也可以应用多种效果.为所有结点类型使用共同特点使得可以提供复杂的文本内容来满足现在的富网络应用(RIAs).

nginx配置让任何文件在浏览器中显示文本text/plain

例子 server { listen 81; root /var/www/applog; autoindex on; autoindex_exact_size off; autoindex_localtime on; location / { } location ~ .*/188.188.1.*/.*\.log$ { add_header Content-Type text/plain; } } 查看博文:nginx配置让任何文件在浏览器中显示文本text/plain 原文地址:http://