Css3-文字
一、text-overflow
text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。
语法：text-overflow:clip(默认属性，表示剪切) | ellipsis(表示显示省略标记)
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>word-wrap</title>
<style>
#box {
width: 180px;
height: 50px;
text-overflow: ellipsis;
overflow: hidden;
/* 强制文本在一行内显示 */
white-space: nowrap;
border: 1px solid #888888;
} #box1 {
width: 180px;
height: 50px;
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
border: 1px solid #888888;
}
</style>
</head> <body> <h3>表示显示省略标记</h3>
<div id="box">
歌曲名：Something Just Like This (童声版)，歌手名：水潇，专辑名：小蝙蝠侠出击
</div> <h3>表示剪切</h3>
<div id="box1">
歌曲名：Something Just Like This (童声版)，歌手名：水潇，专辑名：小蝙蝠侠出击
</div> </body> </html>
word-wrap
二、 word-wrap
Css3-文字的更多相关文章
- jQuery+CSS3文字跑马灯特效
jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...
- CSS3文字描边 CSS3字体外部描边
给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...
- CSS3文字阴影实现乳白文字效果
CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...
- 纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载
- CSS3 文字渐变动画
背景剪裁 语法:background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webki ...
- 3.css3文字与字体
1.css3文字与字体: ①Font-size:大小. ⑴通常使用px.百分比.em来设置大小: ⑵xx-small.x-small.small.medium.large.x-large.xx-lar ...
- 常用CSS3效果：用text-shadow做CSS3 文字描边
思路: 利用CSS3的text-shadow属性,对文字的四个边均用阴影. 最终效果: 单纯的为了实现效果.未作任何美化. 实现代码: HTML: <div>文字描边效果</div& ...
- CSS自学笔记（12）:CSS3文字特效
在CSS3中新增了多个文本属性,同样有了这些属性我们在进行问题特效处理时,就尽可能少的用到其他软件去制作特效文字了. 在以前使用CSS进行web开发的时候,必须使用计算机上安装好的字体,如果有些用户的 ...
- CSS3 文字与字体相关样式
给文字添加阴影 文字换行 客户端文字 font-size-adjust属性 给文字添加阴影-text-shadow属性 text-shadow:length length length color 前 ...
- CSS3文字、背景与列表
一.文本相关属性 1.字体 (1)字体设置 在HTML中,字体通过<font face="字体名称">来设置.在CSS中字体通过font-family属性来控制,里面可 ...
随机推荐
- GetExtendedTcpTable
https://blog.csdn.net/sky101010ws/article/details/55511501 AdjustTokenPrivileges function Library Ad ...
- css图像拼合技术（精灵图）
CSS图像拼合技术 1.图像拼合 图像拼合技术就是单个图像的集合. 有很多图片的网页可能会需要很多时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 图像拼合实例 有 ...
- Oracle12c修改时区
Oacle12c支持可插入数据库(PDB)在一个统一的数据库(CDB)中具有不同的字符集.时区文件版本和数据库时区. 出于性能原因,Oracle建议将数据库时区设置为UTC(0:00),因为不需要转换 ...
- [洛谷P4841][集训队作业2013]城市规划
传送门 题目大意 求出\(n\)个点的简单(无重边无自环)有标号无向连通图数目.\(n\leq 130000\). 题解 题意非常简单,但做起来很难.这是道生成函数经典题,博主当做例题学习用的.博主看 ...
- php array_splice()函数 语法
php array_splice()函数 语法 作用:从数组中移除选定的元素,并用新元素取代它.dd马达价格 语法:array_splice(array,start,length,array) 参数: ...
- Prime算法 与 Kruskal算法求最小生成树模板
算法原理参考链接 ==> UESTC算法讲堂——最小生成树 关于两种算法的复杂度分析 ==> http://blog.csdn.net/haskei/article/details/531 ...
- Cluster基础(一)：配置iSCSI服务、编写udev规则、配置并访问NFS共享、部署Multipath多路径环境
一.配置iSCSI服务 目标: 本案例要求先搭建好一台iSCSI服务器,并将整个磁盘共享给客户端: 虚拟机添加新的磁盘 将新添加的磁盘分区并创建两个逻辑卷 逻辑卷名称分别为:/dev/myvg/isc ...
- 20180809-Java继承
// A.java public class A{ private int i; protected int j; public void func(){ }} // B.javapublic cla ...
- git cherry-pick的使用
[Git] Git整理(五) git cherry-pick的使用 2018年07月13日 23:49:16 FightFightFight 阅读数:31649 版权声明:本文为博主原创文章,未 ...
- mui初级入门教程（二）— html5+ webview 底部栏用法详解
文章来源:小青年原创发布时间:2016-05-19关键词:mui,html5+,webview转载需标注本文原始地址: http://zhaomenghuan.github.io/#!/blog/20 ...