text-overflow-文本溢出包含样式设置

Keven 发布于2019-08-29 11:15 / 1685人阅读

摘要：需求该列展示文本的单元格宽度固定，文本超出部分显示为，当把鼠标移到文字上时，展示完整信息。效果没有获得焦点时获得焦点时另一种实现方案利用属性部分必须必须必须部分如果您把光标移动到下面上，就能够看到全部文本。

背景：

在列表中展示文本信息，但是有的文本信息过长，大部分则较短，若是不加控制，完全显示文本信息，列表会被撑开，很不美观。

需求：

该列展示文本的单元格宽度固定，文本超出部分显示为...，当把鼠标移到文字上时，展示完整信息。

代码实现：

css部分

html部分

如果您把光标移动到下面 div 上，就能够看到全部文本。

This is some long text that will not fit in the box

效果

（1）没有获得焦点时

（2）获得焦点时

另一种实现方案——利用title属性

css部分

html部分

如果您把光标移动到下面 div 上，就能够看到全部文本。

This is some long text that will not fit in the box

GPU云服务器云服务器溢出文本 php文本溢出省略包含了某个文本文本样式html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111523.html

谈谈text-overflow的那些坑和应对方法

摘要：基本语法默认值，将溢出的文本裁减掉将溢出的文本用省略号来表示设置一个字符串用来表示溢出的文本兼容性上，除了外，其余两个属性兼容到了，所以大可放心使用。原文地址：https://www.xksblog.top/the-p... text-overflow是CSS3中的属性，它规定了当文本溢出其包含元素时以何种方式显示。但在使用的时候，有时会发现这个text-overflow设置了属性...

nodejh 2019-08-29 16:26 评论0 收藏0
『总结』CSS/CSS3常用样式与web移动端资源

摘要：常用样式强制文本显示单行显示语法让一段文字在固定宽度在一行显示，最后一个字符为省略标记，样式如下多行文本最后省略号这里用到了文本溢出显示省略号的，即设置溢出文本显示为省略标记语法新增加的表示直接裁切溢出的文本表 css/css3常用样式强制文本显示单行显示语法：white-space:nowrap;让一段文字在固定宽度在一行显示，最后一个字符为省略标记(...)，css样式如下 d...

caoym 2019-08-29 13:24 评论0 收藏0
flex实现左右布局中按钮溢出隐藏效果

摘要：先回顾下关于文本溢出隐藏的方式单行文本当然还需要加宽度属来兼容部分浏览。多行文本显示行数然后开开心心的开始写啊写，代码如下代码这是一个按钮元样式这效果。。最近在开发公司项目的时候UI设计稿给了这么一个设计(这里是我手动画的草图)：showImg(http://images.pingan8787.com/70-UI%E7%A4%BA%E6%84%8F%E5%9B%BE.png);看这效...

CoffeX 2019-08-29 17:26 评论0 收藏0
移动端的text-overflow多行文本溢出显示省略号(…)

摘要：大家应该都知道用属性来实现单行文本的溢出显示省略号。但是这个属性并不支持多行文本溢出显示省略号，这里根据应用场景介绍几个方法来实现这样的效果。，可以用来多行文本的情况下，用省略号隐藏超出范围的文本。大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 overflow: hidden; te...

thekingisalwaysluc 2019-08-30 10:49 评论0 收藏0