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

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. 基础篇系列，JAVA的并发包 - 锁

    JAVA中主要锁 synchronized Reentrantlock ReentrantReadWriteLock 问题引入 为什么需要锁? 为什么JAVA有了synchronize还需要Reent ...

  2. kali linux 忘记root密码重置办法

    有段时间没用kali linux 的,加上最近装的系统有比较多,系统root的密码忘掉了,真是麻烦啊.之前在网上看到的一些方法尝试后没进的去,可能是因为不同的linux 不一样吧. 如果因为忘记密码而 ...

  3. Oralce Plsql 中文显示乱码问题无需修改注册表完美解决

    此方法在其它版系统也可以解决 win10-64 plsql oracle 11g绿色版客户端 错误现象: 因为oracle用的是绿色版,无法设置注册表,尝试以下方法. 解决方法: 1.在plsql中查 ...

  4. mysql编程---函数

    (存储)函数: 函数,也说成"存储函数",其实就是js或php中所说的函数! 唯一的区别: 这里的函数必须返回一个数据(值): 定义形式: 注意事项: 1, 在函数内容,可以有各种 ...

  5. Spring报错——Scope 'session' is not active for the current thread

    在对程序进行了一些修改后,运行发现spring报了这个错误,这是由于我设置了一个@Scope("session")导致的,现记录下解决方法. 解决方法: 将Scope设置为scop ...

  6. DARK的锁链

    Description 无向图中有N个节点和两类边,一类边被称为主要边,而另一类被称为附加边.Dark有N – 1条主要边,并且Dark的任意两个节点之间都存在一条只由主要边构成的路径.另外,Dark ...

  7. shell中的条件表达式

    条件表达式返回的结果都为布尔型 真为1,假为0 条件测试的表达式 [expression] [[expression]] test expression 这三种条件表达式的效果是一样的 比较符 整数比 ...

  8. iwebshop插件的操作

    <?php class Miao extends pluginBase { //插件名字 public static function name(){ return "秒杀" ...

  9. 解决Highcharts 5.0.7，IE8下bar类型图表无法显示的问题

    引用如上, 当图标类型为bar时,IE8无法直接显示, 官网也一样, 但通过切换图例可以显示, 所以加入以下代码解决此问题 未经允许,严禁转载!!!

  10. Python之路-Linux命令基础(3)

    作业一: 1)将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/1.txt(覆盖) 2)将用户信息数据库文件和用户密码数据库文件纵向合并为一个文件/2.txt(追加) 3)将/1.txt./2 ...