CSS 中实现文本超出部分省略的效果

CSS 中使用 text overflow: 可以设置文字超出部分的显示效果，其中属性值 ellipsis 可将超出部分的文字显示为省略号。

在 Flex 布局下为弹性盒子设置文字省略效果时需注意以下事项：

弹性盒子本身或父级设置宽度（若父级有宽度则弹性盒子可以被内容撑开）
若不想给弹性盒子设置具体宽度，可以给出以下属性：
```
flex: 1;
width: 0；
```

设置文字不换行显示，超出部分省略并隐藏：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

完整 CSS 代码：

.father{display: flex;width: 200px;border: 1px solid #000;
}
.son{flex: 1;width: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

后续项目中我又发现了需要将文字显示两行，并在最后一行结尾显示省略效果的需求，具体实现的方法为：

.ellipsis-2 {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}

CSS 中实现文本超出部分省略的效果相关推荐

CSS：实现文本超出显示省略效果（可指定几行显示）
CSS:实现文本超出显示省略效果(可指定几行显示) 代码如下
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
html表格输入框怎么左移动,当我向CSS中的文本框添加边框时，HTML表单输入会移动...
我想在登录表单上的输入字段中添加边框,但是当我添加边框时:1px纯黑色;到#登录表单输入,然后所有的文本框移出位置.当我向CSS中的文本框添加边框时,HTML表单输入会移动当用户输入不正确的凭据到表 ...
html文本阴影水平垂直,CSS中使用文本阴影与元素阴影效果
文本阴影介绍在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...
css可以设置文本框颜色吗,如何在css中设置文本框颜色
如何在css中设置文本框颜色发布时间:2021-04-29 15:33:54 来源:亿速云阅读:72 作者:Leah 如何在css中设置文本框颜色?针对这个问题,这篇文章详细介绍了相对应的分析和解 ...
HTML 与 CSS 中的文本
HTML 与 CSS 中的文本结构化元素结构化元素就是指 HTML 元素中具有明确含义和作用的元素,例如 `` 元素表示段落.相对于 HTML 4.01 版本而言,HTML5 版本新增了一系列结构 ...
css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
使用CSS样式设置文本超出2行显示为省略号
设置文本超出2行显示为省略号在设计前端页面中,我们经常会遇到文本太长导致超出规定区域的情况. 我们只需要在文本中设置以下样式即可解决该问题: html页面: <div class=" ...
html中文字空心如何设置,css 中字体文本小诀窍
本篇介绍 css 几种文本修饰的案例. 1.现实中的文字效果 1.1 凸版印刷效果背景知识:text-shadow 凸版印刷需要考虑两种情况:浅底深色字和深色浅底字浅底深色字代码示例凸版印刷效果 ...

CSS 中实现文本超出部分省略的效果

CSS 中实现文本超出部分省略的效果相关推荐

最新文章

热门文章