如何让多余的文本省略号显示首先要说几个属性的作用：

whitespace:nowrap
中文行末不断行显示
overflow：
控制超出文本的显示方式：hidden 超出范围文本隐藏；scroll 始终显示滚动条；auto 根据文字多少自动显示滚动条
text-overflow：
在overflow设置隐藏的情况下怎么显示
clip裁剪ellipsis省略号显示

那么让多余文字省略号显示需要以下三步：
①white-space：nowrap;如果是中文 设置文字超出范围不断行
②overflow：hidden；设置超出控件范围隐藏；
③text-overflow：ellipsis; 设置多余文本隐藏显示；
<!DOCTYPE html>

    <html>

        <head>

            <meta charset="UTF-8">

            <title></title>

            <style type="text/css">

                div{

                    width: 100px;

                height: 100px;

                background-color: green;

            }

             li{

                 color: red;

                 list-style: none;

             }

             .li{

                 color: blue;

                 font:italic bold 75%/1.8 "Microsoft Yahei",san-serif;

                 font-weight: lighter;

                 white-space: nowrap;

                 overflow: hidden;

                 text-overflow: ellipsis;

             }

        </style>

    </head>

    <body>

        <div>

            <ul>

                <li class="li">第一项第一项第一项第一项第一项</li>

                <li>第二项</li>

                <li>第三项</li>

                <li>第四项</li>

            </ul>

        </div>

    </body>

</html>

可以看到蓝色的一行没有换行省略号显示了

下边补充一些常用的CSS文本属性：

1、字体、字号：
font-style（字体样式）：字体样式 正常（normal）倾斜（italic）
 
font-weight（粗细） 
字体的粗细，可选属性值：bold加粗 lighter细体 100-900可选（400是正常，700=bold）
 
font-size（大小）
字体大小 **px **%(浏览器默认字体大小的百分比) 
 
font-family（字体系列）
字体族，设置字体
多个字体样式用,分隔浏览器解析时会从左到右依次解析选择可用字体。前边使用具体字体名称，最后使用字体族类名称（常见字体族 衬线体serif 非衬线体 sans-serif 等宽体Monospace）
 
 
font（缩写形式）：font-style font-variant font-weight font-size/line-height font-family
顺序必须按照上述顺序，之间用空格分隔，而且font-size/line-height 必须作为一对用/分隔
font-size和font-family必须指定，其他样式不指定将采用默认样式显示
2、字体颜色：
color：
颜色单位写法：
十六进制：#ffffff......分别对应红绿蓝的比例
颜色名称：red.....直接写颜色英文名称
RGB颜色： RGB{255，255，255}......分别对应红绿蓝的比例
RGBA: RGB{255，255，255，0.5}A为透明度0-1，0为完全透明。
 
opacity (透明度 css3)0-1之间的数字。调整时控件背景及子控件均会透明，rgba调整时，只会使本控件透明，子控件不会发生透明度变化
 
3、行距、对齐等：
line-height （行高） 
1.像素单位：48px;
2.不带px 正常行高的倍数
3.百分数 效果同2
4.典型应用，调整控件中的文字垂直居中，控件中的height=控件的line-height
 
text-align （对齐） :
块级中文字的水平对齐方式left center right
 
letter-spacing （字符间距）
字与字之间的间距
 
text-decoration （文本修饰 ）
下划线underline 删除线line-through 上划线overline none
 

如何设置文本不换行省略号显示等CSS常用文本属性的更多相关文章

  1. css常用文本属性

    [CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal, ...

  2. 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行，第二行省略号显示css方法

    文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap;  强制文本不换行 折 ...

  3. 文本多行省略号（CSS最优方案）

    Float定位溢出隐藏 优点: 纯CSS实现,性能好,不用js调优 兼容性高 多行省略,自动显示 缺点: 单词截断 代码如下: <div class="ellipses-div&quo ...

  4. css 文字超出俩行省略号显示

    .center-titles{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: ...

  5. 光标显示样式 css 中 cursor 属性使用

    记录一下 cursor 的各种样式,方便自己查找.之前用到不常用的每次去 百度 或 Google 找不如自己记录下好找些. cursor光标类型 auto default none context-m ...

  6. css基础语法二（常用文本与背景属性）

    [CSS常用文本属性] 1. 字体.字号类:① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal,7 ...

  7. CSS基本属性—文本属性和背景属性

    一.CSS常用文本属性 [css中的颜色表示方式]   1.直接使用颜色的单词表示:red.green.blue    2.使用颜色的十六进制表示:#ff0000,#00ff00:    六位数,两两 ...

  8. [Web 前端] 010 css 常用的边框设置

    css 常用边框属性 概览 参数 释义 border u设置边框属性(可以多个) border-color 边框颜色 border-style 边框样式solid 实线,dotted 点状线,dash ...

  9. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

随机推荐

  1. HTML5学习笔记<六>: HTML5框架, 背景和实体

    HTML5框架 1. 框架标签(frame): 框架对于页面的设计有着很大的作用 2. 框架集标签(<frameset>): 框架集标签定义如何将窗口分割为框架 每个frameset定义一 ...

  2. struct和typedef struct在c++中的用法

    #include<iostream> using namespace std; struct test{ int a; }test; //定义了结构体类型test,声明变量时候直接test ...

  3. 隐性URL与显性URL区别与SEO考虑

    隐性URL与显性URL经常在实现页面跳转的时候用到,这两种方式有什么区别,各自对SEO有什么影响?看一下阿里云的官方文档解释: 显性URL转发: 例如: http://b.com/ 指向 http:/ ...

  4. 【Unity优化】如何实现Unity编辑器中的协程

    Unity编辑器中何时需要协程 当我们定制Unity编辑器的时候,往往需要启动额外的协程或者线程进行处理.比如当执行一些界面更新的时候,需要大量计算,如果用户在不断修正一个参数,比如从1变化到2,这种 ...

  5. C#实现GridView导出Excel

    using System.Data;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System. ...

  6. SQL Server的学习

    一.建库和表1.新建数据库语法: CREATE DATABASE SuperMarket//建立一个名为SuperMarket的数据库. 2.打开数据库语法: USE SuperMarket//打开刚 ...

  7. React中使用CSSTransitionGroup插件实现轮播图

    动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...

  8. IOS开发创建开发证书及发布App应用(五)——编译应用

    5.编译应用 最近升级ios7,一直没有时间写,终于搞完了,完成之前没有完成的工作 由于适配ios7,所以Xcode也升级到5了,所以下面截图基本在Xcode5上,以前的版本基本也差不多的 打开项目的 ...

  9. iOS 任务的依赖操作

    -(void)dependency{ /** 假设有A.B~C三个操作,要求: 1. 3个操作都异步执行 2. 操作C依赖于操作B 3. 操作B依赖于操作A */ //创建一个队列 NSOperati ...

  10. div背景图片或颜色不显示的解决办法

    背景图片不显示的原因: 1. css没有被调用 2. css图片地址不对 3. div的高度没有固定,是auto.没有设值或者高度不够 4. div被嵌套 5. div代码不规范 解决办法: (1)D ...