span标签中显示固定长度，超出部分用省略号代替，光标放到文字上显示全部

迈不过友情╰ 2023-02-15 07:51 70阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]  
多余的字被盖住。  
在span中实现显示某段内容，固定其长度，多余部分用省略号代替，这样就用到html的title属性；

如：`<span title="value"></span>`

title属性：其值是text，属性描述是规定元素的工具提示文本，意思就是鼠标移到元素上时显示title中的内容；可做如下调整：

<span :title="scope.row.title" style="width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align: left;">{
       {scope.row.title}}</span>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200604174542559.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020060417481598.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，70人围观）

还没有评论，来说两句吧...

相关阅读

相关 jsp,div 限制字数，超出部分用省略号代替

1.我是用struts2标签做的：如下： <%@ page language="java" import="java.util." pageEncoding="UTF

野性酷女/ 2024年02月17日 14:16/ 0 赞/ 173 阅读

相关 span设置长文本显示固定长度，超出部分省略号表示，鼠标移动文字上显示所有内容

span设置长文本显示固定长度，超出部分省略号表示，鼠标移动文字上显示所有内容解决方法思路为：设定width，并使文本内容强制单行显示，超出宽度部分用省略号隐藏

曾经终败给现在/ 2023年10月05日 09:08/ 0 赞/ 149 阅读

相关 html --- 文本超出部分显示省略号

在前端开发中，我们往往需要对一些文本内容进行隐藏，达到格式一致，外表美观的效果。如图所示： ![416e781614e44174a1189b6f17d8552e.png]

小灰灰/ 2023年09月28日 10:28/ 0 赞/ 298 阅读

相关 js 文字超出变省略号鼠标放上去显示全部

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmcy

r囧r小猫/ 2023年07月11日 12:41/ 0 赞/ 141 阅读

相关 css 超出部分显示省略号

[参考链接][Link 1] 单行超出省略： title \{ overflow: hidden; white-space: nowrap; text-ov

Myth丶恋晨/ 2023年03月13日 01:56/ 0 赞/ 51 阅读

相关 span标签中显示固定长度，超出部分用省略号代替，光标放到文字上显示全部

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

迈不过友情╰/ 2023年02月15日 07:51/ 0 赞/ 71 阅读

相关 css 实现div内显示固定三行，超出部分用省略号显示

css 实现div内显示两行或三行，超出部分用省略号显示一、div内显示一行，超出部分用省略号显示 white-space: nowrap; o

我就是我/ 2023年01月17日 06:20/ 0 赞/ 300 阅读

相关超出部分显示省略号

单行 { overflow: hidden; white-space: nowrap; text-overflow: elli

太过爱你忘了你带给我的痛/ 2022年12月17日 04:26/ 0 赞/ 345 阅读

相关多行超出部分显示省略号

var p = document.getElementsByTagName('p')[0].innerHTML; console.log(p);

你的名字/ 2022年09月16日 13:28/ 0 赞/ 403 阅读

相关 css 文字超出部分显示省略号

设置table固定布局，否则自适应布局会不受控制 table{ 　　table-layout: fixed; } 单行文字：

朱雀/ 2022年04月13日 14:55/ 0 赞/ 542 阅读