文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS 技巧一则 -- 不定宽溢出文本适配滚动

---- 本文将简单介绍在文本长度不确定，容器长度也不确定的情况下，任意长度的文本实现 hover 状态下，从左向右，滚动到文本末端，再滚动回初始位置，如此反复，像是这样： ?...具体可以参考规范：transformable element 算出滚动距离，进行滚动 这样，我们有了父元素的宽度 150px，文本的宽度。...那么很容易得到需要滚动的距离： 需要滚动的距离 S = 溢出的文本元素的宽度 - 父元素的宽度 这样，我们只需要找到一个可以表示并且当前文本宽度是变量值即可。即是 -- transoform。...不定宽文字跑马灯来回滚动展示 -- 父容器定宽，子元素不定宽 父容器不定宽度 当然，还没完。 如果父容器的宽度也是不固定的，或因为者 calc 兼容性问题无法使用上述方法。...这样，不论父容器宽度如何，文本元素宽度如何，都可以实现对溢出文本适配滚动展示。

1.8K20
您找到你想要的搜索结果了吗？
是的
没有找到

TDesign 更新周报（2022 年 4 月第 2 周）

属性无效的问题 Upload： 修复 remove、selectChange 时间回调异常的问题 修复取消上传逻辑异常 Features Popup： content 尺寸变化后自动更新位置 Slider...按钮无效 修复 Slider inputNumberProps 未正常透传 修复 Affix onFixedChange 触发时机，在固定状态发生变化时才会触发该事件（改动之前为：滚动一直触发） 修复...、排序按钮文本配置 新增 scroll 滚动事件 新增表头吸顶功能 新增综合功能：多级表头 + 固定表头 + 固定列 + 表头吸顶 + 虚拟滚动 + 自定义列配置 过滤功能，条件为真时，高亮筛选图标 新增列拖拽排序功能...label 不展示问题 Form： 兼容 FormItem 单独使用报错问题 Table： 修复 table 高度问题 修复 table className ts 类型丢失 Upload： 修复多图片上传时...Token 的问题 修复图表文字重叠的问题  详情见：https://github.com/Tencent/tdesign-react-starter/releases/tag/0.1.2 更多更新查看

2K10

TDesign 更新周报（2022年12月第3周）

() 多次调用后报错的问题 @Nice-PLQ (#1930)Dropdown: 修复超长下拉菜单子菜单位置异常的问题 @uyarn (#1910)Select: 修复虚拟滚动未关闭下拉框切换页面导致告警的问题...)修复 min 为 0 时不校验问题 @yaogengzhu (#2151)Table: 虚拟滚动支持表格高度变化，issue#1374 @chaishi (#2112)DatePicker:修复右侧面板月份展示错误问题...Variables， 用于调整信息通知文本、背景颜色 @anlyyao (#1153)BackTop: 新增 CSS Variables @anlyyao (#1151)Slider: 支持 CSS...Variables @LeeJim (#1192)NoticeBar: 新增 CSS Variables， 用于调整公告栏文本、背景颜色 @anlyyao (#1036)Stepper: 新增 CSS...Variables， 用于调整步进器文本/图标颜色等 @anlyyao (#1191)Progress: 新增 CSS Variables， 用于调整进度条背景颜色 @anlyyao (#1178)Grid

1.2K20

小程序提升界面使用体验　丰富了内容展示组件

小程序可以获取页面布局，了解用户屏幕滑动情况，并使用页面滚动接口。例如看到一半的文章，开发者可以定位并记住浏览的位置。在用户下次打开小程序时，立即滚动到未读处，方便用户继续阅读。...Android Http 状态码是 302 时异常的问题 F 修复 API showToast 在 iOS 上页面滚动时出现会随着页面滚动的问题 A 新增 canvas 上下文 setTextBaseline...接口 设置绘制文本时的文本基线 F 修复 canvas 上下文 setTextAlign iOS 中文字过长时 center 对齐方式失效的问题 F 修复 canvas 上下文 disable-scroll...disabled 变为 false 后更新不生效的问题 F 修复 组件 视频续播退出后，位置不对的问题 F 修复 组件 弹幕重叠问题 A 新增 性能分析 开发者工具增加...基础库 1.4.0 调试支持 A 新增 性能 Trace 工具 A 新增 Win 菜单栏 hover 时改变背景色 F 修复 全局搜索结果页切换标签回来滚动位置不应回到顶部的问题 F 修复 文件大小写不一致问题导致部分文件系统大小写敏感用户开启工具白屏的问题

1.6K80

知识整理之CSS篇

当出现滚动条时，对象不会随着滚动。 position: sticky（CSS3） 粘性定位，该定位基于用户滚动的位置。 在常态时,它的行为就像 position:relative，遵循常规流。...当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置， 脱离常规流。 position: inherit 从父元素继承 position 属性的值。...示意图： image.png 外边距重叠的意义 外边距的重叠只产生在普通流文档的垂直外边距之间，避免块级元素之间产生双倍边距的问题。 外边距重叠解决方案 1....2. normalize.css 修复了浏览器的bug 它修复了常见的桌面端与移动端浏览器的bug。这往往超出了reset所能做到的范围。...关于这一点，normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

1.5K20

TDesign 更新周报（2022年3月第3周）

overflow 时，仍出现滚动条的问题 Input: 修复组件keypress 事件未触发,修复在 readonly 模式下的聚焦样式 TagInput: 修复 breakline 模式下的 clearIcon...样式重叠, 修复 autowidth 模式下的 padding 不对称,修复超出滚动失效 详情见：https://github.com/Tencent/tdesign-vue-next/releases... DialogPlugin 关闭后滚动问题 Cascader: 修复 multiple 模式点击后关闭 popup 问题 Table: 修复 key 有 0 的数据时的排序问题 Cascader: 修复...children boolean 类型问题 Grid: 支持获取 css vars 做响应式判断 Icon: 支持自定义 Url Slider: label 支持 function 自定义渲染 Form.../tag/0.8.0 设计资源 Figma 组件库优化 1.0.6 版 InputNumber：修复递增递减按钮位置问题 Icon：修复star-filled 倒角问题 详情见：https://tdesign.tencent.com

1.3K20

TDesign 更新周报（2022年7月第4周）

组件库Vue2 for Web 发布 0.44.1 Features支持通过 CSS Token 配置组件圆角 Bug FixesDatePicker: 修复重置日期后面板月份未重置问题修复时间选择器滚动错误...Dialog: 修复 preventScrollThrough 未实现的问题修复出现对于滚动条的问题详情见：https://github.com/Tencent/tdesign-vue/releases...help 插槽不生效的问题Dialog: 修复 preventScrollThrough 为 false 情况下，body 间去了滚动条宽度Table: 树形结构，懒加载节点重置时（即调用 setData...文本等颜色，具体查看文档Search: 新增 CSS Variable 调整 Search 字体、背景、图标等颜色，具体查看文档Rate: 新增 CSS Variable 调整 Rate 辅助文本、选中...调整 标题、背景、文本等颜色，具体查看文档Drawer: 新增 CSS Variable 调整抽屉背景、列表项标题、列表项图标、列表项下边框颜色，具体查看文档 Bug FixesTabs: 修复值等于

2K40

前端面试实录CSS篇（最近一周）

aquamarine; } /* @import "03.css"; */ • 在页面中：不存在权重问题，谁在最低下就使用谁的样式 <!...解决 margin 重叠问题：由于 BFC 是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个 BFC，就解决了 margin 重叠的问题。 2....• inherit: 规定从父元素继承 position 属性的 • sticky: 基于用户的滚动位置来定位 • 前面三者的定位方式如下： • relative：元素的定位永远是相对于元素自身位置的，...，absolute 会跟随父元素进行滚动，而 fixed 固定在某个位置 27....，这种情况下为视窗位置 entry.boundingClientRect; // 被观察者的位置举行 entry.intersectionRect; // 重叠区域的位置矩形

9010

CSS笔记(6)

CSS笔记(6) 上一节的背景图片位置还没写完就匆匆发表了,现在接着后面的内容....图片位置 CSS的背景 背景色半透明 CSS为我们提供了背景半透明的效果 background : rgba (0, 0, 0, 0.3) ; 最后一个参数是alpha透明度,取值范围在0~1...分别是x和y坐标 background-attachment 背景附着 scroll(背景滚动)/fixed(背景固定) 背景简写 书写更简单 背景颜色 图片地址 背景平铺 背景滚动 背景位置 背景半透明....层叠性主要解决样式冲突的问题....层叠性原则: 样式冲突,遵循的原则是就近原则.哪个样式离结构近,就执行哪个样式 样式不冲突,不会层叠. 2.继承性 CSS中的继承,子标签会继承父标签的某些样式,如文本颜色和字号.简单理解就是:子承父业

48510

2024年，你需要了解下这 12 个现代化 CSS 新属性

这不会影响元素在文档中的布局位置，但可以改善滚动到特定元素时的视觉体验。...特别是在有限维度的滚动区域（如侧边栏或滚动框），当滚动到达边界时，滚动行为可能会传递给背景页面，这可能会给用户带来不便。为了解决这个问题，CSS提供了一个属性overscroll-behavior。...浏览器兼容性 11、text-wrap 在网页排版中，处理文本换行是一个经典问题，尤其是要避免在段落的最后一行留下孤立的单词（又称“孤行”）。...2023年，CSS引入了一个新属性text-wrap，旨在解决这类排版问题。 text-wrap属性提供了对文本换行行为的更精细控制，其目标是均衡每行文本的字符数，从而避免不平衡的文本行和孤行现象。...为了解决这一问题，CSS引入了一个新属性scrollbar-gutter，它允许在布局中预留滚动条的空间，防止这种不期望的布局偏移。

33410

纯CSS解决iOS下网页不满一屏header、footer随页面滚动问题

涉及header、footer固定，主体部分可滑动，最初想法一般是position: fixed然而，iOS各种下input获取焦点后fixed失效等一系列问题，致使我们不得不选择另辟他径。...然而，还有很多网站或是Hybird APP还是选择了IScroll之类的三方库来模拟，不得不承认的是，类似IScroll使用CSS3来模拟iOS的Bounce效果，很不错，但有时候我们可能不希望使用IScroll...，但这么暴力的处理往往是不理想的（可能影响其他功能，且页面功能多时，可能出现js加载延迟，页面初始化完第一次还是可以滚动）。...效果大概是这样的：期望是只有主体部分能够滚动，然而向上滑动向下滑动最近遇到这样的问题，尝试后做了如下小改动，可以零js解决此问题，示例代码如下：<!...，而不会触发整个页面的Bounce效果，尝试多个iOS系统，基本没有什么问题，只是1px的差异，遇到处女座可能有点纠结了。

52440

Z-BlogPHP开运锦鲤前来报道（更新说明及操作教程，必看文章）

Js+CSS无加密，购买后可二次开发（因二次开发而导致的网站错版，无法打开等问题均不在售后范围之内，可有偿提供技术支持！）。 7.模板采用图片延迟加载技术、视觉滚动等相关特效。...--修复部分函数接口无效的问题。...更新说明（2020/07/02） V、优化精简js代码，改用css实现！ 更新说明（2020/06/16） V、优化商品模板QQ咨询无法唤醒QQ的问题。 V、修复文章归档模板错误的BUG。...V、修复商品页模板置顶后出现上下模块错位的BUG。 V、修复SEO标题部分页数重叠BUG。 更新说明（2019年/9月12）： V、适配用户等级，如果开启用户中心则优先显示插件设置的用户昵称。...--、修复滚动公告关闭之后列表页、文章页等页面依然存在的BUG。 --、新增网页底部滚动公告功能，自定义公告关闭的时候，显示6篇90天内的热门文章，如果开启自定义公告则显示自定义内容，不显示文章。

3.3K30

TDesign 更新周报（2022年12月第1周）

(#1755)修复分页场景下，设置 max-height 和 bordered 之后，边框线位置不正确 tdesign-vue-next#2062 @chaishi (#1755)Card: 修复 Card...组件 loading 高度塌陷 @HelKyle (#1754)TagInput: 标签边距和图标位置调整 @chaishi (#1758)右侧图标会和标签重合问题 @chaishi (#1758)修复...Variables， 用于调整文本框背景、输入文本颜色 @anlyyao (#1097)Textarea: 外部样式类新增 t-class-indicator @anlyyao (#1097)CountDown...: 外部样式类新增 t-class-count 和 t-class-split @anlyyao (#1085)CountDown: 新增 CSS Variables， 用于调整倒计时背景、文本颜色 @...)Cell: 新增支持 CSS Variables @LeeJim (#1117)Popup: 修复 Popup 以及底层依赖 Popup 的组件无法滚动的问题 @LeeJim (#1125)Loading

2.1K30

Z-BlogPHP开运锦鲤前来报道（更新说明及操作教程，必看文章）

Js+CSS无加密，购买后可二次开发（因二次开发而导致的网站错版，无法打开等问题均不在售后范围之内，可有偿提供技术支持！）。 7.模板采用图片延迟加载技术、视觉滚动等相关特效。...更新说明（2020/07/02） V、优化精简js代码，改用css实现！ 更新说明（2020/06/16） V、优化商品模板QQ咨询无法唤醒QQ的问题。 V、修复文章归档模板错误的BUG。...V、修复商品页模板置顶后出现上下模块错位的BUG。 V、修复SEO标题部分页数重叠BUG。 更新说明（2019年/9月12）： V、适配用户等级，如果开启用户中心则优先显示插件设置的用户昵称。...--、修复滚动公告关闭之后列表页、文章页等页面依然存在的BUG。 --、新增网页底部滚动公告功能，自定义公告关闭的时候，显示6篇90天内的热门文章，如果开启自定义公告则显示自定义内容，不显示文章。...--.修复打赏微信和支付宝位置错误的BUG。 --.优化移动端自适应展示效果。 --.修复因为百度熊掌号导致的JS错误。 --.精简JS，减少不必要的加载。

2.7K40

TDesign 更新周报（2022年4月第1周）

修复 filter 状态下，树无法折叠的问题；修复 lazy 状态下，无法正确展示 label 的问题 Table: 修复虚拟滚动 threshold 引起的报错 修复 TS 定义报错问题，非 Typescript...verticalAlign 不生效问题 右上角出现文字穿透问题 固定表头和固定列，全部使用 CSS sticky 输出样式，组件仅渲染一个表格，表头和表内容 不再分开渲染输出。...) 均可 新增全局配置：过滤图标、空元素、异步加载文本配置、排序按钮文本配置 新增 scroll 滚动事件 新增表头吸顶功能 新增综合功能：多级表头 + 固定表头 + 固定列 + 表头吸顶 + 虚拟滚动...Datepicker: 修复区间选择时间，月份/年份选择时间类型异常的问题 InputNumber: 修复不能输入小数点问题 Popconfirm: 修复按需加载样式丢失问题 Select: 修复首次...submit 事件返回参数错误的问题 Toast: 修复最大宽度和文案没对齐的问题 Input: 修复设置 clearable，点击不清除内容的问题 Dialog: 修复 1px 边框在 iOS 上消失的问题

2.4K20

从头学前端-CSS基础02

它是一组专门用来提高编写 HTML 和 CSS 代码速度的便利工具。将它整合进文本编辑器，可以提供一些功能和快捷方式，加快开发速度。...提供包括 Eclipse、IDEA、UltraEdit、SlickEdit 的插件;CSS复合选择器CSS复合选择器是对基础选择器进行组合而成；常用的选择器又：后代选择器、子选择器、并集选择器、伪类选择器...等行内元素： > a strong b em i span等，行内元素也称内联元素 > 相邻行内元素都显示在一行 > 无法直接设置宽度和高度，设置无效 > 默认的宽度是本身内容的宽度 > 行内元素只能放置文本和其他行内元素...，背景图片 背景平铺，背景图片滚动，背景图片位置 > 各个属性以空格隔开CSS三大特性CSS三大特性：层叠性，继承性、优先级1、层叠性 > 相同选择器设置同一个属性(存在样式冲突)，新属性会层叠或覆盖旧属性...important> a链接有默认的样式{color:blue}，不会继承body的样式> 权重叠加：复合选择器包含多种类型选择器，存在权重计算的问题；> 权重会叠加，但是不是进位; 及多个元素选择器永远小于一个类选择器

71120
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券