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 #;
word-break:keep-all;
} p.test2
{
width:9em;
border:1px solid #;
word-break:break-all;
}

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

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

  1. word wrap 解惑

    源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...

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

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Jetpack Compose学习(2)——文本(Text)的使用

    原文: Jetpack Compose学习(2)--文本(Text)的使用 | Stars-One的杂货小窝 对于开发来说,文字最为基础的组件,我们先从这两个使用开始吧 本篇涉及到Kotlin和DSL ...

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

    关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3. ...

  5. word break和word wrap

    默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...

  6. [转载]3.11 UiPath存在文本Text Exists的介绍和使用

    一.Text Exists的介绍 检查是否在给定的UI元素中找到了文本,输出的是一个布尔值 二.Text Exists在UiPath中的使用 1.打开设计器,在设计库中新建一个Sequence,为序列 ...

  7. UiPath存在文本Text Exists的介绍和使用

    一.Text Exists的介绍 检查是否在给定的UI元素中找到了文本,输出的是一个布尔值 二.Text Exists在UiPath中的使用 1. 打开设计器,在设计库中新建一个Sequence,为序 ...

  8. Microsoft.Office.Interop.Word 创建word

    Microsoft.Office.Interop.Word 创建word 转载:http://www.cnblogs.com/chenbg2001/archive/2010/03/14/1685746 ...

  9. reverse the string word by word

    题目:Given an input string, reverse the string word by word. For example,Given s = "the sky is bl ...

随机推荐

  1. try-with-resources with JDBC

    I realize this was long ago answered but want to suggest an additional approach that avoids the nest ...

  2. MFC基础类及其层次结构

    从类CCmdTarget派生出绝大多数MFC中的类,其层次结构如下图: 从根类Cobject层层派生出绝大多数MFC中的类,层次结构如下图: MFC中重点类: CObject类是MFC的绝大部分类的基 ...

  3. js 常见功能总会

    一.随着页面滚动,元素到达可视区域,显示特殊样式 <!DOCTYPE html> <html lang="en"> <head> <met ...

  4. (一)PHP基础知识考察点

    1,PHP引用变量的考察点: 概念:引用就是用不同的名字访问同一个变量内容. 定义方式: 使用&符号. PHP引用变量的工作原理 这里有个COW  copy on write  用zval() ...

  5. (4)mysql约束

    完整性约束 1.设置非空约束 not null 简称 NK约束 创建表时设置非空 CREATE TABLE tb_meng2(id INT NOT NULL,age INT); 2.设置字段默认值 默 ...

  6. JS switch 分支语句

    描述:根据一个变量的不同取值,来执行不同的代码. 语法结构: switch(变量) { case 值1: 代码1; break; case 值2: 代码2; break; case 值3: 代码3; ...

  7. ASP.NET的一些概念

    简述实体框架(EF): EF是一种ORM工具,ORM表示对象关联映射. 在RDMS中,对象称为表格和列对象,而在.net中(面向对象)称为类,对象以及属性. EF提供了三种方式来实现项目: l 数据库 ...

  8. Mybatis功能架构及执行流程

    原文地址:http://blog.51cto.com/12222886/2052647 一.功能架构设计 功能架构讲解: 我们把Mybatis的功能架构分为三层: (1) API接口层:提供给外部使用 ...

  9. day 60 Django基础七之Ajax

      Django基础七之Ajax   本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 六 同源策 ...

  10. SSL和TLS漏洞验证

    工具下载:git clone https://github.com/drwetter/testssl.sh.git 实验环境:192.168.1.22(bee-box v1.6) 192.168.1. ...