组件传值，自定义组件内部样式，文本超出部分省略号表示

最新推荐文章于 2024-11-01 16:54:21 发布
最新推荐文章于 2024-11-01 16:54:21 发布
阅读量400 收藏 9
点赞数 11
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47078502/article/details/134954488
版权

项目场景：组件传值，自定义组件内部样式，文本超出部分省略号表示

描述

可以控制组件内部样式在不同页面引用可以设置不同效果，比如可以显示几行文本，剩余文本用省略号表示。
在这里插入图片描述
在这里插入图片描述
实现超出部分用省略号显示的其他必要css样式：
在这里插入图片描述

页面引用组件并传值：
在这里插入图片描述

效果：

传值为1的效果：
在这里插入图片描述
传值为2的效果：
在这里插入图片描述

菜小孩的bug记录表
关注
Qt开发经验总结
草上爬的博客
12-02 8609
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
Flutter 基础目录结构介绍、入口自定义widget、等相关组件使用
艾米的猫儿的博客
04-20 2675
提示：此文章为前端学习flutter过程，如有歧义期望各位大大的宝贵意见 学习Dart 基础知识 移步这里 安装flutter环境相关 移步这里 flutter基础组件使用相关 移步这里 文章目录
Android基本组件及使用
wzy_1704A的博客
08-07 592
第一个月交互式视觉设计 第一单元 常用的ADB命令 1:adb start-server 启动adb进程 2:adb kill-server 杀死adb进程 3：adb devices 显示当前运行的全部模拟器 4：adb install -r 应用程序.apk 安装应用程序 5: adb uninstall 包名 卸载软件 6：adb help 查看adb帮助信息、 7：adb logcat ...
鸿蒙开发3-1 基本组件+通用属性+通用事件
weixin_51267334的博客
01-05 2485
本系列是windows系统下、采用ArkTS语言、ArkUI框架、deveco studio编译器学习纯鸿蒙软件研发，采用API version 9进行。本小节主要了解鸿蒙开发的部分常用组件、属性、事件等。并基于该章结合之前的博客知识点，补充了函数作为参数的传递方式，带有this对象的函数作为参数的传递方式，实现了一个待办事项的Demo及其升级。纯小白，一步步学习，记录一下过程便于查询。
图片上传组件的封装
q4717529的博客
10-26 2669
【代码】图片上传组件的封装。
vue学习（6）自定义指令详解及常见自定义指令
qq_39404437的博客
07-30 2710
vue学习（6）自定义指令详解及常见自定义指令
Android零基础入门（五）：UI常用组件
zhang_zxk的博客
11-18 996
目录 第一节：Android布局之相对布局 第二节：AndroidStudio使用指南 第三节：Android布局之约束布局 第四节：Android菜单创建与使用 Menu分类 选项菜单(OptionMenu) 创建 加载 设置 上下文菜单(ContextMenu) 弹出菜单(PopupMenu) 动态创建菜单 经验分享 第五节：Android对话框处理 ​ ...
知识点整理
唯爱赞多的博客
09-03 3956
一、前端常规问题 this 指向 实现BFC arguments promise.all apply 防抖 vue diff算法 二、数据结构问题 柯里化 数字全排列 合并两个有序数组 二叉树路径和 找峰值 数组排序 实现计算机求字符串值 反转链表 n级嵌套 爬楼梯问题 最长回文子串 裴波拉 完全二叉 最大子序和 子字符串匹配 ...
uni-app学习笔记4
weixin_45942372的博客
07-29 246
数据请求封装 http.js 网络请求模板 export default function $http(options) { const { url, data } = options return new Promise((reslove, reject) => { uniCloud.callFunction({ name: url, data }).then((res) => { if (res.result.code === 200) {
前端基础部分习题
wang_bing_bo的博客
11-19 4089
1.DOCTYPE 的作用是什么？标准模式与兼容模式各有什么区别? 声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。 !DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉浏览器它应该使用什么样的文档类型定义（DTD）来解析文档。 标准模式，浏览器按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。标准模式的排版 和 JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老
Web前端知识点总结(持续更新中...)
m0_60472527的博客
10-18 3252
web知识点
高级特效开发——知识点梳理
m0_70298713的博客
03-16 159
高级特效开发——知识点梳理
Vue全家桶
QQ418579986的博客
08-02 221
实战总结
【前端基础】CSS进阶
qq_41413652的博客
11-01 800
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
第七章利用CSS和多媒体美化页面
2402_83227353的博客
10-29 872
用这个属性可以同时设置列表型属性（list一style-type），列表项图片属性（list-style-image）和列表项位置属性（list-style-position）。border-spacing 属性作用等同于标签属性 cellspacing，即当表格边框独立时（border-collapse 属性等于separate），相邻单元格边框之间的横向和纵向的间距。caption-side 属性设置或检索表格标题在表格的哪一边，此属性必须和表格的caption标签同时使用。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 2091
【代码】炫酷的登录框!(附源码)
CSS浮雕效果
p_s_p的博客
10-30 266
【代码】CSS浮雕效果。
CSS例子: 横向排列的格子
最新发布
11-01 324
【代码】CSS例子: 横向排列的格子。
css实现antd丝带效果
m0_62323931的博客
11-01 347
【代码】css实现antd丝带效果。
文本超出显示省略号...
09-19
要实现文本超出显示省略号的功能，你可以使用CSS来控制。这里有两种常见的方式： 1. 单行文本溢出显示省略号[^1]: ```css .text-overflow-example { white-space: nowrap; /* 防止换行 */ overflow: hidden; /* ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值