jstang博客

时间:

  • 首页
  • zblog作品
  • 前端笔记
  • python
  • seo
  • cms
    • zblog
    • 帝国cms
  • 杂记

当前位置:

  • 首页
  • 前端笔记

css实现超出固定长度的部分以省略号显示

发布时间:2022-10-29

作者: jstang

297 1

1.一行中超出固定长度的部分以省略号显示

#div1{
    width: 100px;   
    overflow: hidden;        /*内容会被修剪,并且其余内容是不可见的*/
    text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
    white-space: nowrap;     /*文本不换行*/
}

2.多行中超出固定行数的部分显示省略号

#div2 {
      width: 100px;
      display: -webkit-box;   /*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 3;  /*设置多少行*/
      -webkit-box-orient: vertical;   /*必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式*/
      overflow: hidden;   /*文本会被修剪,并且剩余的部分不可见*/
      text-overflow: ellipsis;   /*显示省略号来代表被修剪的文本*/
}

3.综合使用:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div1 {
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
 
        #div2 {
            width: 100px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div id="div1">文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出</div>
<div id="div2">文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出</div>
</body>
 
</html>

 

————————————————

转


文章版权及转载声明

作者:jstang本文地址:https://www.jstang.cn/post/24.html发布于2022-10-29
文章转载或复制请以超链接形式并注明出处jstang博客

  • 上一篇 :微信小程序对象赋值
  • 下一篇 :css 固定宽高后图片裁剪

同类推荐

微信小程序元素自动换行

微信小程序元素自动换行

2022-07-28

  • 317
  • 0
微信小程序 页面传递数组

微信小程序 页面传递数组

2022-08-19

  • 349
  • 0
php 企业微信外部联系人回调

php 企业微信外部联系人回调

2023-03-05

  • 76
  • 0
微信公众号验证及被动回复事件

微信公众号验证及被动回复事件

2023-03-11

  • 578
  • 0

发表评论

留言:dddxzxx

评论列表

李 回复
2022-12-27 00:33:32

学习一下

最新文章

从小的培养,圈子资源机会很重要

从小的培养,圈子资源机会很重要

半夜翻翻朋友圈睡不着了....家里臭小子3岁多了,原计划9月...

  • 48
  • 0
自由时间段选择

自由时间段选择

最近一直在做一些 自己感兴趣的事情,但每天工作 家庭,连续性...

  • 206
  • 0
​json_decode 返回NULL

​json_decode 返回NULL

json_decode 返回NULL 用 json_last...

  • 59
  • 0
php api接口开发返回json数据

php api接口开发返回json数据

...

  • 45
  • 0
php脚本执行502,504超时问题

php脚本执行502,504超时问题

运行zblog插件时候 有时候数据量较大,php脚本执行会报...

  • 72
  • 0

热门排行

微信小程序拖拽排序

微信小程序拖拽排序

微信小程序拖拽排序问题:拖拽区域,在非拖拽时候 ,进行 手势...

  • 761
  • 0
微信公众号验证及被动回复事件

微信公众号验证及被动回复事件

验证完后,取消验证,进行相关事件处理<?php...

  • 578
  • 0
《前端守则》jstang

《前端守则》jstang

前言:有一个编程原则叫做 DRY(Don't rep...

  • 452
  • 0
小说正在扼杀我的阅读思考能力....

小说正在扼杀我的阅读思考能力....

从18岁就开始看第一本小说《诛仙》,慢慢的看到了现在28岁。...

  • 389
  • 0
专治拖延“懒”的自测有效办法

专治拖延“懒”的自测有效办法

无意中看到一个帖子,大概意思讲的是计划做A事,但是 因为各种...

  • 363
  • 0

猜你喜欢

python线程池

python线程池

...

  • 280
  • 0
Python 遍历字典添加list

Python 遍历字典添加list

>>> dict={} ...

  • 86
  • 0
自定义随机链接标题生成

自定义随机链接标题生成

...

  • 122
  • 0
zblog数据文章分发N平台

zblog数据文章分发N平台

...

  • 181
  • 0
dede织梦接口发布后自动更新首页栏目页

dede织梦接口发布后自动更新首页栏目页

...

  • 110
  • 0

标签

  • 标签2
  • 标签3
  • 微信小程序
  • pbootcms迁移
  • 企业微信
  • 标签1
  • php
  • zblog插件
  • thinkphp
  • pbootcms
jstang博客
回到顶部

冀ICP备2022024290号-1