AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

CSS中溢出的文字省略号显示（单行和多行溢出）

2022-05-06 121
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS中溢出的文字省略号显示（单行和多行溢出）

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单行文本溢出显示省略号</title>
    <style>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 这个单词的意思是如果文字显示不开自动换行 */
            /* white-space: normal; */
            /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3. 文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        啥也不说，此处省略一万字
    </div>
</body>
</html>


image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单行文本溢出显示省略号</title>
    <style>
        div {
            width: 150px;
            height: 65px;
            background-color: pink;
            margin: 100px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div>
        啥也不说，此处省略一万字,啥也不说，此处省略一万字此处省略一万字
    </div>
</body>
</html>
文章标签：
前端开发
关键词：
CSS文字省略
CSS文字
CSS单行
CSS省略号
CSS文字省略号
相信光的奥特王小懒
目录
相关文章
六卿
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性，以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
六卿
39 3
前端基础(五)_CSS文本文字属性、背景颜色属性
疯狂的猿
|
3月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
疯狂的猿
56 1
简单几行代码CSS实现网页自动打文字效果
你真的不认识我了
|
2月前
|
前端开发
css中的多行省略和单行省略
css中的多行省略和单行省略
你真的不认识我了
56 11
派大鑫的工作室
|
1月前
|
Web App开发 前端开发 iOS开发
CSS文字省略号
CSS文字省略号
派大鑫的工作室
22 0
花非花雾非雾11
|
2月前
|
前端开发
css中的多行省略和单行省略
css中的多行省略和单行省略
花非花雾非雾11
48 5
孙飞i
|
3月前
|
移动开发 前端开发 HTML5
css实现涂绘文字的效果
如何使用HTML5和CSS3创建一个简单的文字涂抹动画效果。通过设置一个相对定位的父级div包含文本，并在其上使用绝对定位的伪元素与之重叠，实现动画效果。关键在于控制伪元素的宽度从0%到100%的变化过程，同时利用`overflow: hidden`和`white-space: nowrap`确保文本按预期显示。光标效果则通过添加右边界来模拟。整体代码简洁明了，便于理解和实践。
孙飞i
36 1
css实现涂绘文字的效果
疯狂的猿
|
3月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了，来制作属于我们程序员的浪漫吧！
疯狂的猿
90 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
游客fz577umxdejsg
|
3月前
|
前端开发
CSS流光文字效果：打造网页上的霓虹灯效果！
CSS流光文字效果：打造网页上的霓虹灯效果！
游客fz577umxdejsg
69 0
朝阳39
|
4月前
|
前端开发 容器
CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
朝阳39
78 0
游客eigikghkwlybi
|
前端开发 定位技术 索引
【前端第四课】CSS值和单位；CSS文字排版；CSS变换，过渡，动画；CSS定位
【前端第四课】CSS值和单位；CSS文字排版；CSS变换，过渡，动画；CSS定位
游客eigikghkwlybi
150 0
【前端第四课】CSS值和单位；CSS文字排版；CSS变换，过渡，动画；CSS定位

热门文章

最新文章

  • 1
    纯CSS3实现宽屏二级下拉菜单
  • 2
    CSS3-实现单选框radio的小动画
  • 3
    CSS3实现时间轴效果
  • 4
    如何用纯 CSS 创作一个赛车 loader
  • 5
    05.javascript访问CSS
  • 6
    CSS伪元素实现的3D按钮
  • 7
    CSS3中的选择器
  • 8
    Css:背景色透明，内容不透明之终极方法！兼容所有浏览器
  • 9
    IE6, IE7, IE8 CSS 兼容速查表
  • 10
    碉堡了！ 纯 CSS 绘制《辛普森一家》人物头像
  • 1
    使用CSS中的cursor属性值，常用的可设置参数，以及其他16中参数值的使用场景和示例代码
    73
  • 2
    技术心得：xpath、CSS定位方法
    46
  • 3
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    166
  • 4
    CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
    78
  • 5
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    142
  • 6
    CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
    51
  • 7
    CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
    75
  • 8
    CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
    159
  • 9
    使用HTML和CSS创建响应式表格
    170
  • 10
    常见的css优化方案都有那些
    51

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)