动态(不固定)宽度文本超出显示...
时间:2021-08-08
本文章向大家介绍动态(不固定)宽度文本超出显示...,主要包括动态(不固定)宽度文本超出显示...使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
我们都知道单行文本超出显示... ,只要设置四个属性即可
.base-demo {
/*width: 500px;*/
/* 或 % */
width: 30%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
需求
但是如果我们有这样一个需求:
就是在一个表格,这个表格可以拖拉改变宽度,有表格有3列,第1列需要固定宽度,第2列要制定一个最小宽度,第3列指定一个宽度
当增加表格的宽度时 第2列需要跟着扩大, 第1、3 列不随着扩大,
当压缩表格宽度的时候,小于第3列的宽度的时候,需要压缩这个指定的宽度,文本超出时需要显示..., 但第2列的宽度到最小值时就不允许再压缩了。
实现
因为 2,3 列的特殊性,可以用 div
来实现 table
,div
采用 flex
布局正好能指定空间的分配。
flex 实现这个几个关键的属性:
flex-grow 属性
flex-shrink 属性
flex-basis 属性
flex 属性
了解了这介个属性后我们来看具体的代码:
布局
<div id="drag">
<div class="table">
<div class="row">
<div>ID</div>
<div>人物介绍</div>
<div>名字</div>
</div>
<div class="row">
<div>1</div>
<div>孙悟空是中国明代小说家吴承恩的著作《西游记》中的角色之一</div>
<div>孙悟空</div>
</div>
<div class="row">
<div>2</div>
<div>玄奘(原名:陈玄奘)(602年—644年/664年),唐朝著名的三藏法师</div>
<div>唐僧</div>
</div>
<div class="row">
<div>3</div>
<div>猪八戒是吴承恩所作《西游记》中的角色。法号悟能,是唐僧的二徒弟</div>
<div>猪八戒</div>
</div>
</div>
</div>
flex样式
.table .row {
display: flex;
white-space: nowrap;
}
.table .row div:nth-of-type(1) {
width: 80px;
}
.table .row div:nth-of-type(2) {
flex: 1 0 100px;
/* 上面这条语句是 下面的简写
flex-grow: 1; flex 的扩展量
flex-shrink: 0; flex 的收缩量
flex-basis: 100px; 项目的基础长度
总结:基础长度为 100px 小于基础长度时不允许收缩,空间大于100px时 按照 1的扩展量扩展
详见: https://www.runoob.com/cssref/css3-pr-flex.html
*/
overflow: hidden;
text-overflow: ellipsis;
}
.table .row div:nth-of-type(3) {
margin-left: 6%;
/*margin-left: 20px;*/
flex: 0 1 80px;
overflow: hidden;
text-overflow: ellipsis;
}
效果
参考
原文地址:https://www.cnblogs.com/taohuaya/p/15116442.html
- Android新手之旅(2) 新手问题
- Android新手之旅(2) 新手问题
- Android新手之旅(9) 自定义的折线图
- 2018春节抢票攻略:不仅仅是12306微信小程序启用
- Android新手之旅(9) 自定义的折线图
- Android新手之旅(11) 在现有页面中插入新的view
- Docker容器学习梳理--容器间网络通信设置(Pipework和Open vSwitch)
- 温故而知新:Asp.Net中如何正确使用Session
- Android新手之旅(13) listview中数据重复的问题
- 温故而知新:HttpApplication,HttpModule,HttpContext及Asp.Net页生命周期
- proxy_pass反向代理配置中url后面加不加/的说明
- Android新手之旅(10) 嵌套布局
- C#代码也VB
- Docker容器学习梳理--SSH方式登陆容器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android支付宝支付的示例代码
- 试图解释清楚【JavaScript Event Loop】
- 结合Event Loop谈谈对Vue中nextTick的理解
- Vue3响应式原理
- ClickHouse和他的朋友们(1)编译、开发、测试
- 学会如何学习 - 成为更好的终身学习者
- ToolBar中menu无法同时显示图标和文字问题的解决方法
- Android官方的侧滑控件DrawerLayout的示例代码
- 详解React Native监听Android回退按键与程序化退出应用
- 详解android webView独立进程通讯方式
- Android编程中File文件常见存储与读取操作demo示例
- Android读取properties配置文件的实例详解
- Android开发实现popupWindow弹出窗口自定义布局与位置控制方法
- Android编程实现使用handler在子线程中更新UI示例
- Android编程实现图片放大缩小功能ZoomControls控件用法实例