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属性来控制,里面可 ...
随机推荐
- PHP: thinkPHP踩坑记录(实现API接口以及处理莫名其妙的500问题)
因为各种原因开始学习PHP,并且要在两周内能够对PHP项目进行二次开发,还好PHP够简单,至少入门很简单,很快就接触thinkPHP框架. 在了解了路由匹配视图的规则之后,开始着手尝试编写API接口, ...
- 解决Debug JDK source 无法查看局部变量的问题方案
一.问题阐述首先我们要明白JDK source为什么在debug的时候无法观察局部变量,因为在jdk中,sun对rt.jar中的类编译时,去除了调试信息,这样在eclipse中就不能看到局部变量的值. ...
- windows2008R2双网卡设置(一内网,一外网)
非安装路由角色 修改注册表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Tcpip\Parameters\Interfaces 下的二网卡 ...
- Dump文件的生成
一.Windows系统的任务管理器里抓dump 启动任务管理器,选中某个进程,右键,弹出菜单"创建转储文件" 注意事项: 当你在64位Windows系统上抓32位进程的dmup文件 ...
- 【Java】java.sql.SQLDataException: Cannot determine value type from string
报错如下: There was an unexpected error (type=Internal Server Error, status=500). Error attempting to ge ...
- Python_002(基础知识)
1.格式化输出 %s:字符串的占位符,可以放置任何内容(数字) 代码展示:%去除法 admin_input1 = input("请输入用户名:") pass_input = inp ...
- CF1137F Matches Are Not a Child's Play
我们定义一棵树的删除序列为:每一次将树中编号最小的叶子删掉,将该节点编号加入到当前序列的最末端,最后只剩下一个节点时将该节点的编号加入到结尾.现在给出一棵n个节点的树,有m次操作: up v:将v号节 ...
- promise以及async、await学习总结
Promise/async.await帮我们解决了什么 它给我们提供了一种新的异步编程解决方案,同时避免了困扰已久的回调地狱 // 异步的处理可能会产生这样的回调地狱(第二个异步操作和第一个异步的结果 ...
- MySQL innodb的组合索引各个列中的长度不能超过767,
MySQL索引的索引长度问题 MySQL的每个单表中所创建的索引长度是有限制的,且对不同存储引擎下的表有不同的限制. 在MyISAM表中,创建组合索引时,创建的索引长度不能超过1000,注意这里索 ...
- CentOS7.4下载与安装 、使用
CentOS7.4下载与安装 1:安装步骤这篇博客挺详细的就不多说了: https://blog.csdn.net/qq_39135287/article/details/83993574 2:安装好 ...