css教程css超出部分如何设置省略号

 所属分类:web前端开发

 浏览:206次-  评论: 0次-  更新时间:2022-10-19
描述:更多教程资料进入php教程获得。 css超出部分设置省略号的方法:首先新建文档;然后在HTML的【<head>】头部定义【<style>】标签,引入一段内...
更多教程资料进入php教程获得。

css超出部分设置省略号的方法:首先新建文档;然后在HTML的【<head>】头部定义【<style>】标签,引入一段内联的CSS样式;最后保存以上文件,并在浏览器预览即可。

前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

本教程操作环境:windows7系统、css3版,DELL G3电脑。

css超出部分设置省略号的方法:

首先,新建一个HTML文档,用于承载CSS

97536d228e771ac8c9922ec9b3d4faa.png

保存以上部分,并在浏览器预览效果,此刻是,并未引入CSS设置的效果

15aa682b08728f71e6bc7e0541ae6b4.png

在HTML的<head>头部定义<style>标签,引入一段内联的CSS样式

18c1f0f89ade28eb55212aeec56ea4e.png

对h1标签定义一段CSS,用于设置超出部分省略号显示,示例:

h1{
            width: 300px;/*定义块元素的宽度*/
            white-space: nowrap;/*内容超宽后禁止换行显示*/
            overflow: hidden;/*超出部分隐藏*/
            text-overflow:ellipsis;/*文字超出部分以省略号显示*/
}
登录后复制

8d85582981c5781b5b28e4055d067fc.png

保存以上文件,并在浏览器预览效果

55035b8a4a44845c8a15d8590a9ede5.png

相关学习推荐:css教程

以上就是css超出部分如何设置省略号的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: css,省略号,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!