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. arm-linux-strip 的使用

    3.2.1    1. 移除所有的符号信息 [arm@localhost gcc]#cp hello hello1 [arm@localhost gcc]#arm­linux­strip ­strip ...

  2. php代码post请求

    <?php /** * 发送post请求 * @param string $url 请求地址 * @param array $post_data post键值对数据 * @return stri ...

  3. JS对象 向下取整floor() floor() 方法可对一个数进行向下取整。 语法: Math.floor(x)

    向下取整floor() floor() 方法可对一个数进行向下取整. 语法: Math.floor(x) 参数说明: 注意:返回的是小于或等于x,并且与 x 最接近的整数. 我们将在不同的数字上使用 ...

  4. NIO教程笔记

    NIO操作文件部分详解 NIO——New IO,也可以理解为非阻塞IO(Non Blocking IO).可以替代旧IO,更高效的支持读写(文件读写,网络读写).但文件操作都是阻塞的.学习NIO首先要 ...

  5. vue+Iview+gulp 生成文档说明

    1.安装npm gulp相关插件 比如:gulp.gulp-concat.gulp-htmlmin.gulp-cssmin.gulp-cheerio.gulp-clean 2. 编写gulpfile. ...

  6. VC中隐藏和显示IDC_STATIC

    void CImageShowAndHideDlg::OnBnClickedButton1() //隐藏 {       CWnd* pWnd = GetDlgItem(IDC_STATIC);    ...

  7. BZOJ 1037 (ZJOI 2008) 生日聚会

    题目描述 今天是hidadz小朋友的生日,她邀请了许多朋友来参加她的生日party. hidadz带着朋友们来到花园中,打算坐成一排玩游戏.为了游戏不至于无聊,就座的方案应满足如下条件: 对于任意连续 ...

  8. exit与return的区别

    ===========================PHP的解释=========================================================== return ...

  9. 框架前期准备篇之AutoFac常见用法总结 转载

    框架前期准备篇之AutoFac常见用法总结 一. 说在前面的话 凡是大约工作在两年以上的朋友们,或多或少都会接触到一些框架搭建方面的知识,只要一谈到框架搭建这个问题或者最佳用法这个问题,势必会引起一点 ...

  10. centos下 安装python相关

    centos 安装python相关 python3 https://blog.csdn.net/tanxiaob/article/details/78725301 yum -y install zli ...