CSS(ellipsis) 用百分比宽度将字符串溢出部分显示为省略号

这篇具有很好参考价值的文章主要介绍了CSS(ellipsis) 用百分比宽度将字符串溢出部分显示为省略号。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

通常使用 ellipsis 将溢出部分显示为省略号必须给出指定像素宽度(width:200px),这样不方便共享响应式的样式定义,经过查资料,可以用 CSS 的 calc() 函数实现。文章来源地址https://www.toymoban.com/news/detail-733334.html

table > tbody > tr > td.file > a {
    display: inline-block;
    height: 45px;
    padding-left: 46px;
    background-repeat: no-repeat;
    margin-top: 10px;
    margin-bottom: 10px;
    width: calc(50%);
    overflow: hidden; 
    text-overflow: ellipsis;
    white-space: nowrap; 
}

到了这里,关于CSS(ellipsis) 用百分比宽度将字符串溢出部分显示为省略号的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Echarts 柱状图显示百分比

    要求:每个数值显示具体百分比,计算方式为: effect_cnt/total_cnt 数据结构为:{ \\\"dt\\\": \\\"20240110\\\", \\\"effect_cnt\\\": 725, \\\"total_cnt\\\": 1387, \\\"both_effect_cnt\\\": 912, \\\"green_cnt\\\": 650 }, 打印 formatter 的 params 里面只有 “effect_cnt” 的值,如果要进行计算,需要 params 里面包含 “total_cnt” 

    2024年01月20日
    浏览(38)
  • 在视频中选定/截取部分区域画面,然后将左上角坐标百分比和选定区域宽高所占百分比传给后端

    在视频中选定部分区域,然后将左上角坐标百分比和选定区域宽高所占百分比传给后端 播放 flv 格式视频 点击“截取”按钮,将视频当前画面截取为一张图片并回显图片, 使用 Cropper 插件截取图片部分区域(可以获取到截取图片左上角点坐标和截取部分的宽高) cropperjs 参数

    2024年02月03日
    浏览(35)
  • (vue)多级表头且转为百分比显示

    2024年02月11日
    浏览(37)
  • 移动端布局之流式布局1(百分比布局)

    流式布局,就是百分比布局,也称非固定像素布局 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充 流式布局方式是移动web开发使用的比较常见的布局方式 max-width 最大宽度(max-height 最大高度) min-width 最小宽度(min-height

    2024年02月06日
    浏览(41)
  • 鸿蒙OS应用开发之百分比显示组件

    前面学习了动态加载的组件,在本文里将要学习百分比显示组件,这个组件可以把数据按百分比的情况进行图形显示出来。百分比图形显示还是很有用的,比如一个班里学生的成绩占比,还有软件项目开发进度的情况,还有软件下载进度等等。 在鸿蒙系统里定义这个组件接口

    2024年01月20日
    浏览(44)
  • 一文搞懂:viewpoint与rem、百分比、px

    ​一个表总结: 名称 定义 使用示例 viewpoint 是指用户在网页上实际可见和可交互的区域,通常指的是浏览器窗口或移动设备的屏幕尺寸。 width:100vw;height:100vh rem (root em)是相对于根元素(通常是 html 元素)的字体大小来计算的单位。 width:100rem;height:100rem 百分比 是

    2024年03月19日
    浏览(47)
  • 记录vue项目用到的水波纹 百分比 进度

     echarts-liquidfill  git地址:mirrors / ecomfe / echarts-liquidfill · GitCode 示例:echarts图表集 前置条件,安装echarts,同时还需要安装echarts-liquidfill 注意 :echarts-liquidfill@3 版本匹配 echarts@5 版本,echarts-liquidfill@2 版本匹配 echarts@4 版本 在main.js中引入 初始化图形方法

    2024年02月16日
    浏览(47)
  • Echarts饼状legend如何自动显示值和百分比

    效果图如下,   重点在legend里如何设置   显示值和百分比     重点在legend里如何设置   显示值和百分比  

    2024年02月11日
    浏览(42)
  • js 四舍五入保留一位小数 求百分比

    概览:一个数据占一组数据的比率,并且四舍五入保留一位小数。通过Math.round()四舍五入。 参考链接: mdn中文文档Math.round() 实现思路: Math.round(x)  函数返回一个数字四舍五入后最接近的整数。参数x是一个数值 实现代码: 保留一位小数: Math.round(num* 1000) / 10 

    2024年02月15日
    浏览(41)
  • C语言如何实现将一个小数以百分比的形式输出

    在C语言中我们用连着的两个百分比符号表示一个百分比符号,即“%%”就表示一个百分比符号,例如我们想输出40%这个数到屏幕上我们可以执行以下语句: 这样就可以将40%输出在屏幕上了 若我们想要将0.857这个浮点数以百分制的形式输出在屏幕上呢?我们知道将0.857这个数转

    2024年02月06日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包