首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

布局之悬浮显示更多文本并增加箭头指示效果

记录一个界面交互的小功能 UI效果图 需求描述 文本只显示一行,超出显示省略号 文本超出显示省略号的同时,在右侧显示箭头指示,否则,不显示箭头 鼠标悬浮展示全部文本,箭头转向...思路分析 先不考虑右侧"箭头",单纯的鼠标悬浮展示全部不难实现(前面【卡片布局...】一文中已经实现过,本文代码是在上篇之上修改) 控制箭头交互的时候,把文本元素和箭头元素分别设置宽度...通过过渡(transtion)控制鼠标悬浮箭头转向 通过自定义指令控制“箭头”显示隐藏 代码展示 card 组件 html <div class="textCard...el.parentNode.offsetWidth; // 绑定元素的上一个兄弟元素 const s_w = el.previousElementSibling.offsetWidth; // 20: icon 的宽度; <em>文本</em>的最大宽度...calc(100% - 20px) if (p_w - s_w <= 20) { // 一行<em>文本</em>已满格,显示icon } else { // <em>文本</em>没有满一行,隐藏

75810
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS 定位布局 - 绝对、固定定位设置居中悬浮div

    下面设置一下相对定位,看看会不会影响这种居中效果 ? 从上图可以看出相对定位并不会影响margin居中布局。 设置一下绝对定位,看看会不会影响这种居中效果 ?...设置一下固定定位,看看会不会影响margin居中效果 ? 固定定位也是会影响margin居中布局的,其实就是 margin-left: auto; 失效了。 好了,那么问题来了。...这种情况下,该如何设置布局呢? 在绝对定位的情况下,设置div居中布局 居中布局当然就要先使用left偏移来进行设置,不过这次偏移需要用百分比,不然浏览器稍微缩放就无法居中了。 ? ?...好了,从上面来看,绝对定位已经可以设置div居中了,那么固定定位是否也是如此呢? 固定定位设置div居中 ? ?...固定定位从上图来看,也是可以通过这种方式来进行居中的,基本方法如下: left: 50% margin-left: 负自身宽度的一半 因为绝对定位和固定定位相对于文档流就是悬浮的,这种效果最适合用于制作页眉部分的固定栏目了

    3.4K20

    【CSS】CSS 文本样式 ④ ( CSS 外观属性 | color 文本颜色 | text-align 文本对齐方式 | line-height 行间距设置 | 首行缩进设置 | 文本装饰设置 )

    文章目录 一、color 文本颜色 二、text-align 文本对齐方式 三、line-height 行间距设置 四、text-indent 首行缩进设置 五、text-decoration 文本装饰设置...---- text-align 属性 , 可以设置 文本对齐方式 , 为标签设置该 CSS 样式 , 标签内的内容就会使用相应的对齐方式 ; text-align 属性 取值 : left : 左对齐..., 该值是默认值 ; right : 右对齐 ; center : 居中对齐 ; text-align 属性 是 让标签中的 文本内容 对齐 , 标签的位置大小区域不变 ; 在 head 标签设置 ....tac { text-align:center; } 居中对齐 文本样式 , 将该样式定义在 .tac 类选择器 中 ; 将 tac 类 设置到 h1 标签中 , 让该标签中的内容居中对齐 ; <h1...---- text-decoration 属性 , 用于 设置 文本装饰 ; text-decoration 属性 常用于为 链接 修改 装饰效果 ; text-decoration 属性值 : none

    1.7K30

    Django之富文本(获取内容,设置内容方式)

    文本 1、Rich Text Format(RTF) 微软开发的跨平台文档格式,大多数的文字处理软件都能读取和保存RTF文档,其实就是可以添加样式的文档,和HTML有很多相似的地方 图示 ?...# 注册富文本应用 'tinymce', ] 添加默认配置 # 以字典形式配置富文本框架tinymce # 作用于管理后台中的富文本编辑器 TINYMCE_DEFAULT_CONFIG =...{ # 使用高级主题,备选项还有简单主题 'theme': 'advanced', # 'theme': 'simple', # 必须指定富文本编辑器(RTF=rich text...5、利用js获取富文本内容和设置内容给富文本 //editorId是富文本的id function SetTinyMceContent(editorId, content) { //给富文本编辑器设置内容...(获取内容,设置内容方式)就是小编分享给大家的全部内容了,希望能给大家一个参考。

    4.1K30

    内容分栏设置:如何将PPT文本框中的文字设置分栏

    https://www.pptbest.com/jiaocheng/2019-09-27/268.html 首先,进入到需要拆分为幻灯片中文本框的文本内容的文档中; 1.jpg 进入文档后,我们编辑文本框中的文本内容...,然后选择文本框并单击鼠标右键弹出右键菜单; 2.jpg 在弹出的菜单栏中选择“设置形状格式”以打开“设置形状格式”弹出窗口,然后在弹出窗口顶部的菜单栏中选择“文本选项”菜单; 3.jpg 接下来...,在“文本选项”菜单下,选择“文本框”选项卡,并在“打开设置”选项底部找到“分栏”按钮; 4.jpg 我们点击“分栏”按钮打开“栏”选项弹出窗口。...在弹出的窗口中,我们将“数量”设置成自己需要的,在设置好分栏的“间距”,最后点击“确定”即可; 5.jpg 在确认并返回到ppt文档后,我们可以看到所选文本框中的文本内容就自动按设置进行了分栏;...6.jpg 以上就是今天给大家带来的ppt文本文本内容分栏步骤,相信认真阅读的小伙伴们都看明白了吧,动手试试吧!

    9.8K10

    win10 UWP 剪贴板 Clipboard 设置文本获取文本获取图片获取文件

    下面告诉大家如何设置文本设置文本 在UWP把字符串添加到剪贴板使用代码很少。 第一个创建 DataPackage,无论添加图片还是什么都是使用 DataPackage ,只有他可以放到剪贴板。...DataPackage dataPackage = new DataPackage(); 然后把文本设置 DataPackage ,因为剪贴板只能设置 DataPackage ,所以即使添加字符串,也是使用...DataPackage dataPackage.SetText("文本"); Clipboard.SetContent(dp); 设置图片的方法也是相同...如果需要设置任意类型,请使用SetData,这时设置类型可以是随意。但是可能设置不成功。...var data = new DataPackage(); data.SetData("字符串","内容"); 获取文本 如果需要获取文本,一般在开始都判断是否包含文本

    2K10

    【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )

    文章目录 一、案例效果 二、核心要点说明 1、网页默认样式 2、盒子模型居中显示 3、设置渐变背景 4、设置列表浮动 5、设置文本水平垂直居中 6、设置链接文本样式 7、设置鼠标经过的样式 三、完整代码示例...设置总体背景 : 为 body 标签设置背景颜色或图片即可 图片自适应填充 : 设置 标签的内容宽度为 100% 即可 , 目的是令图片自适应缩放 ; /* 清除标签默认的内外边距 *...float: left; } 如果一行排满 则自动换行 , 通过精密计算 , 可以实现网格样式的排列 ; 5、设置文本水平垂直居中 设置 text-align: center; 样式 , 可以使文本水平居中...设置文字垂直居中 */ line-height: 32px; /* 水平居中 */ text-align: center; 6、设置链接文本样式 链接一般需要设置 字体大小..., 颜色 , 取消文本装饰 ( 链接的下划线 ) ; /* 设置字体大小 */ font-size: 12px; /* 取消链接文字的下划线 */ text-decoration

    2.3K20

    【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )

    a img { /* 图片宽度为 40 像素 高度自适应 */ width: 40px; /* 上下 10 像素外边距 */ margin: 10px 0; } 5、设置文本...在链接中的文本 , 放在 标签中 , 该标签宽度默认充满父容器 , 高度自适应 ; 将其设置为 block 块级元素 , 就可以放置在图片下方 ; 文本 span 样式为 : nav...a span { /* 导航栏中的文本 设置为 块级元素 */ display: block; } 二、完整代码实例 ---- 1、HTML 标签结构 <!...; /* 文本水平居中 */ text-align: center; /* 文本颜色白色 */ color: #fff; } .app ul li:nth-child(...像素 高度自适应 */ width: 40px; /* 上下 10 像素外边距 */ margin: 10px 0; } nav a span { /* 导航栏中的文本

    3.3K40

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    热门标签

    领券