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. HttpServlet中service方法的源码解读

    前言     最近在看<Head First Servlet & JSP>这本书, 对servlet有了更加深入的理解.今天就来写一篇博客,谈一谈Servlet中一个重要的方法-- ...

  2. Git 获取项目git clone

    git clone 克隆项目 git clone 实际上是一个封装了其他几个命令的命令. 它创建了一个新目录,切换到新的目录,然后 git init 来初始化一个空的 Git 仓库, 然后为你指定的 ...

  3. 阿里云启动视频云V5计划,全面赋能生态合作伙伴

    9月25 - 27日,主题为数·智的2019云栖大会在杭州举行.在第三天的智能视频云专场中,阿里云研究员金戈首次对外发布视频云V5计划,释放视频IT基础设施红利,赋能生态合作伙伴,共促大视频产业发展. ...

  4. Bubble Cup 12 - Finals [Online Mirror, unrated, Div. 1] E. Product Tuples

    题意略,题解生成函数练习题,1+(q-ai)x卷积即可,线段树优化(类似分治思想) //#pragma GCC optimize(2) //#pragma GCC optimize(3) //#pra ...

  5. python截图+百度ocr(图片识别)+ 百度翻译

    一直想用python做一个截图并自动翻译的工具,恰好最近有时间就在网上找了资料,根据资料以及自己的理解做了一个简单的截图翻译工具.整理一下并把代码放在github给大家参考.界面用python自带的G ...

  6. js 实现 map 工具类

    /* * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, v ...

  7. getResourceAsStream的几种路径配置(properties文件的路径问题)

    文章目录 getResourceAsStream有以下几种: getResourceAsStream有以下几种: Class.getResourceAsStream(String path) : pa ...

  8. 腾讯bugly接入插件(CocosCreator)

    下载: plugin-bugly.zip (1.4 MB) 插件开源地址: https://github.com/tidys/CocosCreatorPlugins/tree/master/packa ...

  9. sparkJavaApi逐个详解

    说明:掌握spark的一个关键,就是要深刻理解掌握RDD各个函数的使用场景,这样我们在写业务逻辑的时候就知道在什么时候用什么样的函数去实现,得心应手,本文将逐步收集整理各种函数原理及示例代码,持续更新 ...

  10. JS规则 较量较量(比较操作符) 两个操作数通过比较操作符进行比较,得到值为真(true)和假(false)。【>; <; >=; <=; !=;==】

    较量较量(比较操作符) 我们先来做道数学题,数学考试成绩中,小明考了90分,小红考了95分,问谁考的分数高? 答: 因为"95 > 90",所以小红考试成绩高. 其中大于号& ...