博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css3之文本text-overflow 与 word-wrap, word-break
阅读量:5886 次
发布时间:2019-06-19

本文共 682 字,大约阅读时间需要 2 分钟。

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

 

转载于:https://www.cnblogs.com/myzy/p/7010006.html

你可能感兴趣的文章
工具类
查看>>
vue-webpack 引入echarts 注意事项
查看>>
指针的应用
查看>>
ORACLE 总结
查看>>
实战部署FAST Search Server 2010 for SharePoint (转闪电)
查看>>
二.Python基本数据类型
查看>>
python常用模块---转载
查看>>
web框架-(七)Django补充---models进阶操作及modelform操作
查看>>
kali访问宿主机Web页面解决方案
查看>>
html简介
查看>>
Android利用文本分割拼接开发一个花藤文字生成
查看>>
哈夫曼树的实现
查看>>
12-18Windows窗体应用小程序之记事本(1)
查看>>
02-18 报表
查看>>
毕业论文一次性修改所有字母和数字的字体
查看>>
结构体:HASH表模板
查看>>
[转]理解Linux文件系统之inode
查看>>
在i3 Cpu上允许64位系统
查看>>
视频编解码学习之五:差错控制及传输
查看>>
String:自动进行空间扩展
查看>>