jsp:超出字数显示省略号；鼠标悬停显示完整文本

朴灿烈づ我的快乐病毒、 2022-06-12 07:08 793阅读 0赞

\*\*

## 一. 需求： ##

\*\*  
列表页中，控制某一列中的文字显示：只显示前16个字符，超出部分用省略号代替。当鼠标悬停时，显示该列的全部内容。

\*\*

## 二. 解决方案： ##

\*\*  
使用css来处理这个问题：  
在jsp文件中，添加内部样式：

.ellipsis { overflow: hidden; /*自动隐藏文字*/ text-overflow: ellipsis;/*文字隐藏后添加省略号*/ white-space: nowrap;/*强制不换行*/ width: 16em;/*不允许出现半汉字截断*/ }

然后，在列中使用该样式：

<td><div class="css2" title="${msgContent}">${msgContent}</div></td>

即可。  
注意：

1.在div里面添加：

title="${msgContent}"

这一语句即可实现鼠标悬停显示全部文字效果。

2.该样式直接添加在td中，如写成：

<td class="css2">${item.msgContent}</td>

无法实现省略号的效果。需要添加一个div容器。

\*\*

## 三.补充方式： ##

\*\*  
百度的时候，还找到了另一个方法，就是直接使用struts2自带的属性  
先引入

<%@ taglib prefix="s" uri="/struts-tags" %>

然后在td中写：

<s:if test="remark.length()>5">    
    
         <s:property value="remark.substring(0,5)" />
    
              <a href="#"  style="cursor:default;text-decoration:none;color:#0000ff;" title="${item.remark }">...</a>//鼠标移动到省略号时显示省略的字符
    
    </s:if>    
    
     <s:else>    
    
         <s:property value="remark" />    
    
    </s:else>

不过由于项目里面没有引入struts，因此没有去验证这个方法是否正确。先添加在这里做个备份。

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关超出部分显示省略号

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

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

相关 CSS设置div超出文本显示省略号

.xx{ overflow: hidden; text-overflow: ellipsis; white-space:

偏执的太偏执、/ 2022年11月14日 14:46/ 0 赞/ 252 阅读

相关 vue 根据字符串的长度控制显示的字数超出显示省略号

一、概述经常会见到，标题或者字段超过多长，然后进行相关的截断，以下在vue当中，使用了vue的过滤器，很好的解决了这问题。二、代码实现 test.vue

骑猪看日落/ 2022年11月07日 13:13/ 0 赞/ 300 阅读

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

最近项目中用到了这个小特性，文本超出部分用省略号显示，特此记录便于日后查阅。 .content { width: 100rpx !important;

- 日理万妓/ 2022年10月12日 01:24/ 0 赞/ 338 阅读

相关 HTML超出文本显示省略号...[text-overflow]

css: width: 350px; display: block; white-space:nowrap; overflow: hidden; text-overf

客官°小女子只卖身不卖艺/ 2022年08月14日 01:39/ 0 赞/ 202 阅读

相关鼠标悬停显示

鼠标悬停设置页面中鼠标放在超链接上时的显示效果，并且可以在里面设置文本样式和字体大小等属性 <div> a:hover{

不念不忘少年蓝@/ 2022年06月16日 01:21/ 0 赞/ 345 阅读

相关 jsp:超出字数显示省略号；鼠标悬停显示完整文本

\\ 一. 需求： \\ 列表页中，控制某一列中的文字显示：只显示前16个字符，超出部分用省略号代替。当鼠标悬停时，显示该列的全部内容。 \\ 二. 解决方案

朴灿烈づ我的快乐病毒、/ 2022年06月12日 07:08/ 0 赞/ 794 阅读

相关实现指定字数文本溢出显示显示省略号...

方法一使用css中text-overflow:ellipsis搭配其它css属性实现。 .boxCon { overflow: hidden;

迷南。/ 2022年05月09日 00:56/ 0 赞/ 335 阅读

相关 CSS文本超出两行显示显示省略号

html <div class="text">超出两行显示省略号</div> css .text{ display: -webkit-b

深藏阁楼爱情的钟/ 2022年03月26日 15:14/ 0 赞/ 577 阅读