如何设置文本不换行省略号显示等CSS常用文本属性

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

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

转载于:https://www.cnblogs.com/cherishli/p/6488811.html

如何设置文本不换行省略号显示等CSS常用文本属性相关推荐

css不换行省略号没作用,flex布局下，css设置文本不换行时，省略号不显示的解决办法...
大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度. a name a info Lorem ipsum dolor sit amet, co ...
css常用的属性(边框三角形，文本省略号)
文章目录边框列表背景文本显示省略号边框边框相关属性 border-width 边框宽度属性值:length(数值+单位)例如 width:10px border-style 边框样式 ...
css 文本背景色透明_如何使用CSS将文本或图像的背景设置为透明？
css 文本背景色透明 Introduction: 介绍: In web development, there are numerous ways by which we can style our ...
qt显示html富文本图片,Qt QLabel显示图片动画富文本
0 前言动画 QLabel 功能不少, 能够用来显示图片动画富文本this 1 效果.net 对于图片和动画, 先添加到资源文件再使用3d 右键 Resources -> 添加现有文件cod ...
文本超出显示省略号/数字英文字母折行有关css 属性/显示两行，第二行省略号显示css方法...
文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行折 ...
css 超出省略号显示，指定多行省略号显示
如果实现单行文本的溢出显示省略号应该都知道用text-overflow:ellipsis属性来,还需要加宽度width属来兼容部分浏览. overflow: hidden; text-overflow ...
neo4j设置节点或者边的显示，包括颜色、属性、大小
第一步:选择要设置的节点标签或者选择边第二步.找到浏览器底部显示的设置选项底部会出现如下选项第三步.根据需求进行随意设置包括节点大小.颜色.需要显示的属性
css多行省略号兼容ie,css超出2行部分省略号……，兼容ie
html> Page Title .wrap { height: 40px; line-height: 20px; overflow: hidden; } .wrap .text { float ...
CSS - 常用样式属性（字体、文本、背景相关、鼠标）

如何设置文本不换行省略号显示等CSS常用文本属性

如何设置文本不换行省略号显示等CSS常用文本属性相关推荐

最新文章

热门文章