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

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. Jaro-Winkler Distance

    发现commons-lang 中有实现: StringUtils.class public static double getJaroWinklerDistance(final CharSequenc ...

  2. JS中undefined与null的有趣 关系

    今天学习中遇到了一个有意思的问题. var obj = undefined 我们将一个对象设置为undefined typeof(obj)>>undefined 结果是undefined, ...

  3. 对bootstrap不同版本的总结

    之前以为bootstrap2和bootstrap3没啥区别,无非就是功能增加了,简直是误区啊 bootstrap3与bootstrap2版本语法都不同啦 栅格写法 col-md-3/span3 文本效 ...

  4. Android OS体系结构详解

    Google于2007年11月5日宣布的基于Linux平台的开源手机操作系统的名称,该平台由操作系统.中间件.用户界面和应用软件组成,号称是首个为移动终端打造的真正开放和完整的移动软件. 架构详解 下 ...

  5. 【转】Lucene.NET详细使用与优化详解

    1 lucene简介1.1 什么是luceneLucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿来就能用,它只是提供了一种工 ...

  6. 构建微服务（Building Microservices）-PDF 文档

    闲时翻译了几篇基于Spring Cloud.Netflix OSS 构建微服务的英文文章,为方便分享交流,整理为PDF文档. PDF 文档目录: 目录 一.微服务操作模型... 3 1.     前提 ...

  7. Hadoop2.7.3分布式集群安装

    一.依赖文件安装 1.1 JDK 参见博文:http://www.cnblogs.com/liugh/p/6623530.html 二.文件准备 2.1 文件名称 hadoop-2.7.3.tar.g ...

  8. YII2.0 ——安装yii2项目

    有两种安装方式 第一种:使用composer进行安装 composer global require"fxp/composer-asset-plugin:^1.2.0" compo ...

  9. FitVids，一个轻视频插件，操作简单

    最近在找一个视频插件,偶尔看见一个口碑啥的都不错的插件,FitsVids. fitvids.js 是个轻量级,易于使用的 jQuery 插件,用来在网页上播放指定宽度的嵌入视频.Fitvides.js ...

  10. poptest老李谈数据库优化总结

    poptest老李谈数据库优化总结   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9088 ...