首页 > 其他分享 >css样式对单行和多行文本的隐藏

css样式对单行和多行文本的隐藏

时间:2023-10-10 14:58:14浏览次数:38  
标签:多行 样式 单行 文本 隐藏 css

在我们日常的网页中,尤其是新闻类的网页会遇到许多类似于这样的样式

多行甚至单行的文本隐藏+上省略号标题。

解决这一办法,需要利用css的样式进行改变

如下代码的演示:

单行文本隐藏:

多行文本隐藏:

主要知识点:

1、单行文本隐藏省略:文本不能换行、超出部分隐藏、超出部分省略

2、多行文本隐藏省略:需要利用display改变标签的属性,使其变为弹性盒子并垂直排序、保留对应的行数、最后将超出部分进行隐藏

标签:多行,样式,单行,文本,隐藏,css
From: https://www.cnblogs.com/ljygzyblog/p/css1009.html

相关文章

  • 每日一题:通过css变量来控制主题
    1、定义不同主题颜色:root{--theme-color:blue;--font-size:18px;;}html[theme="dark"]{--theme-color:#000;2、通过切换html自定义属性来控制主题<!DOCTYPEhtml><htmllang="en"><head><met......
  • PyCharm单行执行代码 或 运行选中的代码
    选中代码,然后Alt+Shift+E,或者,右键,菜单操作如下 ......
  • css技巧
    https://segmentfault.com/a/1190000044084906?utm_source=sf-similar-article......
  • CSS 将div撑满body
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>测试</title><style>html,body{height:100%;margin:0;overflow:hidden;}.con......
  • Spring Boot 访问静态资源css/js
    一、前言我们用SpringBoot搭建Web应用时(如搭建一个博客),经常需要在Html中访问一些静态资源,比如:css样式;js脚本;favicon.ico图标等;而在SpringBoot中如果没有做任何配置,是无法直接访问静态资源的,通常会报404错误二、SpringBoot访问静态资源的默认目录Spring......
  • CSS弹性盒子
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>......
  • CSS盒子模型
    对html进行封装:包括外边距、边框、内边距和实际内容<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title......
  • Oracle和达梦:连接多行查询结果
    Oracle和达梦:LISTAGG连接查询结果LISTAGG介绍使用LISTAGG函数,您可以将多行数据连接成一个字符串,并指定分隔符进行分隔。这在需要将多行数据合并为单个字符串的情况下非常有用,例如将多个值合并为逗号分隔的列表。函数介绍LISTAGG(column,delimiter)WITHINGROUP(ORDER......
  • 自定义滚动条 css
    /*自定义滚动条css*/.customScrollbar::-webkit-scrollbar{width:10px;height:10px;}.customScrollbar::-webkit-scrollbar-thumb{border-radius:8px;background-color:#47515b;}.customScrollbar::-webkit-scrollbar-thumb:hover{background-color:#5D626C;}.customScr......
  • css自定义滚动条
    .container{width:200px;height:150px;overflow:auto;/*自动显示滚动条/-ms-overflow-style:scrollbar;/在IE上显示自定义滚动条*/}/*自定义滚动条的样式*/.container::-webkit-scrollbar{width:10px;height:10px;}.container::-webkit-scrollbar-trac......