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属性来控制,里面可 ...
随机推荐
- uiautomatorviewer不能直接截取手机屏幕信息
本身可以用sdk——>tools里自带的ui automator viewer截取如果截取不了,采用以下方法: 新建一个文本文档,名字自己起如uni.bat(注意把后缀给改成.bat) adb ...
- mysql 通过navicat 添加函数或者过程
1. 添加函数时, 函数参数的 varchar(255) 一定要加上 255,返回也要加.不加一直保存不了,狂试: 2. 添加过程时, 进入课程体 编辑时 也要加上 varchar 的位数限制.不 ...
- wangeditor 支持上传视频版
1.关于使用哪个富文本编辑器. 简单的要求,不要求发布出来的文章排版要求很高. 可用wangediter.(简单,体积小,不可修改上传图片的尺寸大小) 转载 来源: https://blog.csd ...
- Python---基础---数据类型的内置函数
2019-05-23 ---------------------------- 一. #数据类型的内置函数Python有哪些数据类型?Number 数值型string 字符型list ...
- eclipse 报错:One or more constraints have not been satisfied.
接受 我有同样的问题.在我的maven项目中添加速度依赖关系后,我在标记选项卡中得到相同的错误.然后我注意到maven项目创建的web.xml文件具有servlet2.3模式.当我将其更改为servl ...
- 6 October
P1514 引水入城 题目描述 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好构成一个 \(N\) 行 \(\times M\) 列的矩形,如上图所示, ...
- 笨办法学Python（learn python the hard way）--练习程序31-35
下面是练习31-练习35,基于python3 #ex31.py 1 print("You enter a dark room witn two doors. Do you go throug ...
- Centos7开机自动启动服务和联网
虚拟机设置选择NAT模式,默认情况下,Centos不是自动连接上网的,需要点击右上角,手动连接上网. 可以修改开机启动配置修改: 1. cd 到/etc/sysconfig/network-scrip ...
- Windows 环境下vue+webpack前端开发环境搭建
一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...
- python 爬虫之requests爬取页面图片的url，并将图片下载到本地
大家好我叫hardy 需求:爬取某个页面,并把该页面的图片下载到本地 思考: img标签一个有多少种类型的src值?四种:1.以http开头的网络链接.2.以“//”开头网络地址.3.以“/”开头绝对 ...