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

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. H5 音频

    HTML 5 音频 HTML5 视频/DOM HTML5 拖放 HTML5 提供了播放音频的标准. Web 上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比 ...

  2. PHP环境搭建（20161014）

    听课笔记: 上午: 现在PHP的版本一般是5.5,相对于以前的版本移除了一些函数,所以在以后使用到不同版本的PHP时要特别注意 localhost(本机[默认的网址]) my project(我的项目 ...

  3. spring切面编程AOP 范例一

    参照网上的spring AOP编程实例进行配置,但是碰到了几个坑.这篇文章重点讲解一下我踩过的两个坑: 1.使用@Service自动装配的时候,基础扫描包配置要正确: 2.xml中切面配置中的exec ...

  4. cstring头文件函数解析

    原创作品,转载请注明来源:http://www.cnblogs.com/shrimp-can/p/5643829.html 在使用由字符数组或指针组成的字符串的时候,要用到一些函数,这些函数通常包含在 ...

  5. 关于jstl的问题：The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar files deployed

    Current sofeware:java Eclipse ee 4.5.2 + Tomcat 6.0 Question: 在tomcat中部署好了我的项目,然后发布后没有报错.但是当在浏览器打开的时 ...

  6. iOS开发之MapKit

    1.概述 MapKit框架使用前提: 导入框架: 导入主头文件: #import <MapKit/MapKit.h> MapKit框架使用须知: MapKit框架中所有数据类型的前缀都是M ...

  7. iOS开发之iOS程序的启动过程

    程序启动的完整过程: (1)main函数 (2)UIApplicationMain * 创建UIApplication对象 * 创建UIApplication的delegate对象 (3)delega ...

  8. 牛顿迭代法求开根号。 a^1/2_______Xn+1=1/2*(Xn+a/Xn)

    #include <stdio.h>#include <math.h>int main(void){ double a,x1=1.0,x2; printf("plea ...

  9. keystone无法查看catalog并且用户无法申请令牌的解决方案

    在运行openstack catalog list之后提示: Only an authorized user may issue a new token. #只有授权用户才能申请token opens ...

  10. Java基础之面试题

    本文我们将要讨论Java面试中的各种不同类型的面试题,它们可以让雇主测试应聘者的Java和通用的面向对象编程的能力.下面的章节分为上下两篇,第一篇将要讨论面向对象编程和它的特点,关于Java和它的功能 ...