一、text-overflow

   text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出。

语法:text-overflow:clip(默认属性,表示剪切) | ellipsis(表示显示省略标记)

       注:text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果
 <!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

    word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。
         语法:word-wrap:normal(表示控制连续文本换行) | break-word(表示内容将在边界内换行)
         normal为浏览器默认值,break-word设置在长单词或 URL地址内部进行换行,此属性不常用,用浏览器默认值即可。

Css3-文字的更多相关文章

  1. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  2. CSS3文字描边 CSS3字体外部描边

    给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...

  3. CSS3文字阴影实现乳白文字效果

    CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...

  4. 纯CSS3文字Loading动画特效

    纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载

  5. CSS3 文字渐变动画

    背景剪裁 语法:background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webki ...

  6. 3.css3文字与字体

    1.css3文字与字体: ①Font-size:大小. ⑴通常使用px.百分比.em来设置大小: ⑵xx-small.x-small.small.medium.large.x-large.xx-lar ...

  7. 常用CSS3效果:用text-shadow做CSS3 文字描边

    思路: 利用CSS3的text-shadow属性,对文字的四个边均用阴影. 最终效果: 单纯的为了实现效果.未作任何美化. 实现代码: HTML: <div>文字描边效果</div& ...

  8. CSS自学笔记(12):CSS3文字特效

    在CSS3中新增了多个文本属性,同样有了这些属性我们在进行问题特效处理时,就尽可能少的用到其他软件去制作特效文字了. 在以前使用CSS进行web开发的时候,必须使用计算机上安装好的字体,如果有些用户的 ...

  9. CSS3 文字与字体相关样式

    给文字添加阴影 文字换行 客户端文字 font-size-adjust属性 给文字添加阴影-text-shadow属性 text-shadow:length length length color 前 ...

  10. CSS3文字、背景与列表

    一.文本相关属性 1.字体 (1)字体设置 在HTML中,字体通过<font face="字体名称">来设置.在CSS中字体通过font-family属性来控制,里面可 ...

随机推荐

  1. less:运算

    less中的运算 -任何数字.颜色或者变量都可以参加运算,运算应该被包裹在括号中. -例如:+-*. @width: 30px; .box { width: (20 + 5) * @width; } ...

  2. CSS3 结构性伪类选择器(1)

    1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. “:root”选择器等同于<html>元 ...

  3. jinfo 干涉java runtime的jvm参数

    https://blog.csdn.net/bolg_hero/article/details/78156311 jinfo使用介绍可以用来查看正在运行的Java应用程序的扩展参数,甚至支持在运行时, ...

  4. LeetCode--047--全排列 II(java)

    给定一个可包含重复数字的序列,返回所有不重复的全排列. 示例: 输入: [1,1,2] 输出: [ [1,1,2], [1,2,1], [2,1,1] ] 对比46题增加了used数组,判断该数上次是 ...

  5. linux运维、架构之路-网络基础

    一. 常用网络设备 1.交换机:实现多台主机之间互相通讯的需求 交换机实现互相通讯的要求: ①主机身份标识信息:mac地址,利用源mac和目标mac地址,进行身份信息识别 ②主机通过交换机识别目标主机 ...

  6. RabbitMQ生产者消费者模型构建(三)

    ConnectionFactory:获取连接(地址,端口号,用户名,密码,虚拟主机等) Connection:一个连接 Channel:数据通信信道,可发送.接收消息 Queue:具体的消息存储队列 ...

  7. 170817关于JSON知识点

    1.  JSON                [1] JSON简介                         JSON全称 JavaScript Object Notation         ...

  8. windows server IIS启用Windows authentication

    双击打开IIS网站的authentication,如果有Windows authentication,直接右键启用即可,如果没有的话需要先安装一下Windows authentication,Micr ...

  9. ["1", "2", "3"].map(parseInt) 答案是多少?

    让我们先看看最直接最粗暴的方式 没错,答案就是:[1, NaN, NaN],那为什么答案是[1, NaN, NaN]呢? 1.让我们先了解一下map函数的定义 JavaScript Array map ...

  10. 一文读懂PID控制算法(抛弃公式,从原理上真正理解PID控制)

      PID控制应该算是应用非常广泛的控制算法了.小到控制一个元件的温度,大到控制无人机的飞行姿态和飞行速度等等,都可以使用PID控制.这里我们从原理上来理解PID控制. PID(proportion ...