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 #;
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的更多相关文章
- word wrap 解惑
源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...
- CSS3新增文本属性实现图片点击切换效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jetpack Compose学习(2)——文本(Text)的使用
原文: Jetpack Compose学习(2)--文本(Text)的使用 | Stars-One的杂货小窝 对于开发来说,文字最为基础的组件,我们先从这两个使用开始吧 本篇涉及到Kotlin和DSL ...
- 使用CSS3改变文本选中的默认颜色——张鑫旭
关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3. ...
- word break和word wrap
默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...
- [转载]3.11 UiPath存在文本Text Exists的介绍和使用
一.Text Exists的介绍 检查是否在给定的UI元素中找到了文本,输出的是一个布尔值 二.Text Exists在UiPath中的使用 1.打开设计器,在设计库中新建一个Sequence,为序列 ...
- UiPath存在文本Text Exists的介绍和使用
一.Text Exists的介绍 检查是否在给定的UI元素中找到了文本,输出的是一个布尔值 二.Text Exists在UiPath中的使用 1. 打开设计器,在设计库中新建一个Sequence,为序 ...
- Microsoft.Office.Interop.Word 创建word
Microsoft.Office.Interop.Word 创建word 转载:http://www.cnblogs.com/chenbg2001/archive/2010/03/14/1685746 ...
- reverse the string word by word
题目:Given an input string, reverse the string word by word. For example,Given s = "the sky is bl ...
随机推荐
- IdentityServer_0_参考资料
官方 项目地址:https://github.com/IdentityServer/IdentityServer4 官方Demo:https://github.com/IdentityServer/I ...
- WPF命令好状态刷新机制
https://blog.csdn.net/WPwalter/article/details/90344470 this.DispatcherInvoke(() => { System.Wind ...
- Windows mkdir
创建目录. MKDIR [drive:]pathMD [drive:]path 如果命令扩展被启用,MKDIR 会如下改变: 如果需要,MKDIR 会在路径中创建中级目录.例如: 假设 \a 不存在, ...
- CentOS 7.2部署NTP服务器实现时间同步
CentOS 7.2部署NTP服务器实现时间同步 [日期:2017-12-18] 来源:Linux社区 作者:梁明远 [字体:大 中 小] 1. 前言 对于容器编排系统,前段时间主要研究kube ...
- js--判断当前环境是否为app环境
/** *判断是否是app环境 */ function getIsApp () { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/ ...
- 一篇关于Matcher find方法深刻理解的文章
文章目录 知识点 find find(int var1) reset group(int var1) 源码 故事是这样的 探索 问题解决 方法一: 方法二: 方法三: 总结 知识点 find 首先fi ...
- 【转载】一定要会用selenium的等待,三种等待方式必会
转载地址:http://blog.csdn.net/huilan_same/article/details/52544521,感谢博文,学习了 原文: 发现太多人不会用等待了,博主今天实在是忍不住要给 ...
- 宇宙最强 IDE:VS 2019 正式发布
作者:局长 来源:www.oschina.net/news/105629/ 如约而至,微软已于今天推出 Visual Studio 2019 正式版,一同发布的还有 Visual Studio 201 ...
- visual studio 注释模板
/*----------------------------------------------------------------* 项目名称 :$rootnamespace$* 项目描述 :* 类 ...
- 16-1-es5
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...