一、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. SPOJ - DQUERY （主席树求区间不同数的个数）

    题目链接:https://vjudge.net/problem/SPOJ-DQUERY 题目大意:给定一个含有n个数的序列,有q个询问,每次询问区间[l,r]中不同数的个数. 解题思路:从左向右一个一 ...

  2. 【学习】011 JVM参数调优配置

    自动内存管理机制 Java虚拟机原理 所谓虚拟机,就是一台虚拟的机器.他是一款软件,用来执行一系列虚拟计算指令,大体上虚拟机可以分为 系统虚拟机和程序虚拟机, 大名鼎鼎的Visual Box.Vmar ...

  3. $2019$ 暑期刷题记录1:(算法竞赛DP练习)

    $ 2019 $ 暑期刷题记录: $ POJ~1952~~BUY~LOW, BUY~LOWER: $ (复杂度优化) 题目大意:统计可重序列中最长上升子序列的方案数. 题目很直接的说明了所求为 $ L ...

  4. Redis安装配置以及开机启动

    1.下载源码,解压缩后编译源码.  $ wget http://download.redis.io/releases/redis-2.8.3.tar.gz $ .tar.gz $ cd redis- ...

  5. TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片

    **TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片首先我们来看看淘宝的功能和样式:** 之后看看制作完成的演示:(由于全部功能弄成GIF有点大,限制上传大小好像在1M之内,压缩之后也有1.9 ...

  6. Linux内核设计与实现 总结笔记（第六章）内核数据结构

    内核数据结构 Linux内核实现了这些通用数据结构,而且提倡大家在开发时重用. 内核开发者应该尽可能地使用这些数据结构,而不要自作主张的山寨方法. 通用的数据结构有以下几种:链表.队列.映射和二叉树 ...

  7. CSS入门基础学习二

    我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...

  8. stack1顺序栈

    顺序栈 #include<iostream> using namespace std; #define increasesize 10 template <class Object& ...

  9. 虚拟机CentOS7安装docker并搭建Gitlab私服

    一.下载安装虚拟机和CentOS7系统 这些流程比较简单不会有什么坑,这里不再阐述 二.安装docker 1.Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验 ...

  10. 20180705-Java对象和类

    Java对象和类 Java作为一种面向对象语言.支持以下基本概念: 多态继承封装抽象类对象实例方法消息解析 本节我们重点研究对象和类的概念. 对象:对象是类的一个实例,有状态和行为.例如,一条狗是一个 ...