<h:outputText>标签 中怎么限制字数 多余的用省略号,并且鼠标放上时显示全部信息

最新推荐文章于 2023-04-11 22:27:49 发布
最新推荐文章于 2023-04-11 22:27:49 发布
阅读量7.2k 收藏 1
点赞数
分类专栏： 杂记 文章标签： xhtml border class html 文档 ssh
本文展示了如何通过CSS来实现文本自动截断功能，利用省略号来优雅地处理长文本内容，提高网页加载速度和用户体验。详细介绍了样式规则的设置以及不同浏览器下的兼容性处理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style>


/* 省略号*/
 
.ssh{
width:200px;/*容器的基本定义*/
height:auto;
}
  /* IE下的样式 */
p span{
display: block;
width:200px;/*对宽度的定义,根据情况修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}/* FF 下的样式 */
p{clear:both;}
p:after{
content:"...";
}

 

 

</style>
<body>
<table width="100%" border="1">
  <tr>
    <td width="20%">&nbsp;</td>
    <td width="24%">&nbsp;</td>
    <td width="56%">&nbsp;</td>
  </tr>
  <tr>
    <td class="ssh" title="asdasdasdasdadasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdadasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdadasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdadasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdadasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdadasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdadasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd"><p><span>asdasdasdasdadasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdadasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdadasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdadasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdadasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdadasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdadasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span></p></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

p标签文字超过一定数量用...代替
09-28
p标签文字超过一定数量用...代替
html h标签字数限制,HTML标签书写规范那些事儿
weixin_28769989的博客
06-03 760
我们知道HTML5是由HTML+CSS+JavaScript，三部分组成。其中HTML是Hyper Text Markup Language的缩写，那HTML主要是包含一系列的标签，我们把这些标签叫做HTML标签，它是HTML语言中最基本的单位、最重要的组成部分。我们一起来看看吧。一、文档类型声明：在具体聊HTML标签前，先来扯扯别的，我们平时接触的浏览器都有哪些呢？谷歌(Chrome)、火狐(F...
css实现限制文字字数
TCMvines的博客
09-14 4764
max-width:100px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
css 控制<p>字数，超出部分显示“...”
stayreal_OAOA
07-26 7878
单行文本隐藏 p{ border: 1px solid red; width:200px; height:25px; /*word-break:break-all;*/ white-space: nowrap;/*强制在一行显示*/ text-overflow:ellipsis;/*设置超出内容显示...*/ overflow: hidden;/*一定不能少 超出的内容进行隐藏*/...
Jquery text文本框限制字数或文本框提示字数
weixin_33912445的博客
09-18 260
<form name="" id="" action="" class="Form"> <textarea id="wordtext" style="width:600px;"></textarea> <div id="wordage"></div> <a style="color:#fff;flo...
<h:outputText> 套数。单元格颜色浅绿色</h:outputText> 如何实现将浅绿色几个字标为对应颜色
06-18
然后在JSF页面中：<h:outputTextvalue="#{bean.text}"escape="false"/>这样就会将“浅绿色文字”显示为浅绿色。如果我们不想在bean中写HTML，也可以在页面中直接写：<h:outputTextescape="false"value="这是一段包含...
<p:panelGrid columns="2" style="width: 600px;"> <f:facet name="header">报表说明</f:facet> <h:outputText value="栏位说明:" style="width: 60px;"/> <ul> <ui:repeat value="#{orderV2Vc_orderProcMoreBeanV2.columnCommentList}" var="value"> <li> <h:outputText value="#{value}"/> </li> </ui:repeat> </ul> <h:outputText value="单元格颜色说明:" style="width: 60px;"/> <ul> <ui:repeat value="#{orderV2Vc_orderProcMoreBeanV2.columnCommentList}" var="value"> <li> <h:outputText value="#{value}"/> </li> </ui:repeat> </ul> </p:panelGrid> 分两列显示
06-19
### 在 JSF 中使用 `<p:panelGrid>` 实现两列布局并正确显示内容 为了在 JSF 中实现两列布局，并正确显示报表说明、栏位说明和单元格颜色说明的内容，可以使用 PrimeFaces 提供的 `<p:panelGrid>` 组件。以下是详细...
<?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:cc="http://java.sun.com/jsf/composite" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"> <cc:interface/> <cc:implementation> <p:dialog header="周达成率记录" id="weekSummaryLogDia" widgetVar="weekSummaryLogDia" position="center" modal="true"> <p:dataTable id="summaryLog" widgetVar="summaryLog" value="#{wtWeekSummaryBean.showWeekSummaryLogs}" var="entity" currentPageReportTemplate="{startRecord}-{endRecord} of {totalRecords} records" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" emptyMessage="没有数据" rows="10" resizableColumns="true" style="width:450px;" rowHover="true" rowIndexVar="rowvar"> <p:column headerText="序号" style="width:15px;text-align: center;"> <h:outputText value="#{rowvar+1}"/> </p:column> <p:column headerText="周id" style="width:60px;text-align:center;"> <h:outputText value="#{entity.weekId}"/> </p:column> <p:column headerText="工号" sortBy="#{empNo}" style="width:60px;text-align:center;"> <h:outputText value="#{entity.empNo}"/> </p:column> <p:column headerText="姓名" width="50" style="text-align:center;"> <h:outputText value="#{entity.empName}"/> </p:column> <p:column headerText="网页工时" style="width:60px;text-align:right"> <h:outputText value="#{entity.webWt}"> <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/> </h:outputText> </p:column> <p:column headerText="OPT工时" style="width:60px;text-align:right"> <h:outputText value="#{entity.optWt}"> <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/> </h:outputText> </p:column> <p:column headerText="品质扣分" style="width:60px;text-align:right"> <h:outputText value="#{entity.deductWt}"> <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/> </h:outputText> </p:column> <p:column headerText="合计产出" style="width:60px;text-align:right"> <h:outputLabel value="#{entity.totalWt}"> <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/> </h:outputLabel> </p:column> <p:column headerText="实际出勤" style="width:60px;text-align:right"> <h:outputText value="#{entity.onDutyHour}"/> </p:column> <p:column headerText="出勤率" style="width:50px;text-align:right"> <h:outputText value="#{entity.onDutyRate}"> <f:convertNumber type="percent" maxFractionDigits="1"/> </h:outputText> </p:column> <p:column headerText="达标率" style="width:50px;text-align:right"> <h:outputText value="#{entity.uptoStandardRate}"> <f:convertNumber type="percent" maxFractionDigits="2" /> </h:outputText> </p:column> <p:column headerText="创建时间" style="display:none;"> <h:outputText value="#{entity.createTime}"> <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" timeZone="GMT+8"/> </h:outputText> </p:column> <p:column headerText="更新时间" style="display:none;"> <h:outputText value="#{entity.updateTime}"> <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" timeZone="GMT+8"/> </h:outputText> </p:column> </p:dataTable> </p:dialog> </cc:implementation> </html> 我JSF 碎片页面是这样的，可能别的项目调用后这边弹窗显示数据
最新发布
08-08
<think>根据提供的JSF碎片代码，这是一个使用PrimeFaces的对话框（`<p:dialog>`）来展示周达成率记录的数据表格（`<p:dataTable>`）。数据源绑定到`#{wtWeekSummaryBean.showWeekSummaryLogs}`。由于您提到这是被...
<h:body> <h:form> <h1>测试表单提交</h1> <h:outputText value="name:"/> <h:inputText id="name" value="#{testBean.name}"> <f:validateLength minimum="3"/> </h:inputText> <h:outputText value="pwd:"/> <h:inputText id="pwd" value="#{testBean.password}"> <f:validateLength minimum="6"/> </h:inputText> <h:message for="pwd"/> <h:commandButton value="submit"/> </h:form> </h:body> jsf 实现在点击submit的时候家宴pwd长度，并且将提示信息hover在输入框上方
05-31
- 使用`<h:message>`标签显示验证错误信息，并通过CSS将其定位到输入框上方。 - 利用JavaScript监听输入框的`blur`事件，动态控制错误信息的显示状态[^1]。 - 借助Bootstrap或其他前端框架可进一步优化视觉效果。 #...
<?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:cc="http://java.sun.com/jsf/composite" xmlns:lkmcc="http://java.sun.com/jsf/composite/lkmComponent" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core"> <cc:interface/> <cc:implementation> <p:dialog header="周达成率记录" id="weekSummaryLogDia" widgetVar="weekSummaryLogDia" position="center" modal="true"> <p:dataTable id="summaryLog" widgetVar="summaryLog" value="#{wtWeekSummaryBean.showWeekSummaryLogs}" var="entity" currentPageReportTemplate="{startRecord}-{endRecord} of {totalRecords} records" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" emptyMessage="没有数据" rows="10" resizableColumns="true" style="width:450px;" rowHover="true" rowIndexVar="rowvar"> <p:column headerText="序号" style="width:15px;text-align: center;"> <h:outputText value="#{rowvar+1}"/> </p:column> <p:column headerText="周id" style="width:60px;text-align:center;"> <h:outputText value="#{entity.weekId}"/> </p:column> <p:column headerText="工号" sortBy="#{empNo}" style="width:60px;text-align:center;"> <h:outputText value="#{entity.empNo}"/> </p:column> <p:column headerText="姓名" width="50" style="text-align:center;"> <h:outputText value="#{entity.empName}"/> </p:column> <p:column headerText="网页工时" style="width:60px;text-align:right"> <h:outputText value="#{entity.webWt}"> <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/> </h:outputText> </p:column> <p:column headerText="OPT工时" style="width:60px;text-align:right"> <h:outputText value="#{entity.optWt}"> <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/> </h:outputText> </p:column> <p:column headerText="品质扣分" style="width:60px;text-align:right"> <h:outputText value="#{entity.deductWt}"> <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/> </h:outputText> </p:column> <p:column headerText="合计产出" style="width:60px;text-align:right"> <h:outputLabel value="#{entity.totalWt}"> <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/> </h:outputLabel> </p:column> <p:column headerText="实际出勤" style="width:60px;text-align:right"> <h:outputText value="#{entity.onDutyHour}"/> </p:column> <p:column headerText="出勤率" sortBy="#{onDutyRate}" style="width:50px;text-align:right"> <h:outputText value="#{entity.onDutyRate}"> <f:convertNumber type="percent" maxFractionDigits="1"/> </h:outputText> </p:column> <p:column headerText="达标率" sortBy="#{uptoStandareRate}" style="width:50px;text-align:right"> <h:outputText value="#{entity.uptoStandardRate}"> <f:convertNumber type="percent" maxFractionDigits="2" /> </h:outputText> </p:column> <p:column headerText="创建时间" style="display:none;"> <h:outputText value="#{entity.createTime}"> <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" timeZone="GMT+8"/> </h:outputText> </p:column> <p:column headerText="更新时间" style="display:none;"> <h:outputText value="#{entity.updateTime}"> <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" timeZone="GMT+8"/> </h:outputText> </p:column> </p:dataTable> </p:dialog> </cc:implementation> </html> 我新写的jsf碎片 别的项目要引用 这样写有没有问题
08-08
例如，输出文本是否需要转义，使用h:outputText是安全的，但如果使用其他标签可能需要额外处理。 跨项目引用的问题，需要确保碎片的独立性。可能需要将相关的Bean和资源打包成库，方便其他项目引用。同时，检查是否...
text-overflow属性
lecss的专栏
01-11 404
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。
文字超过一定字数用省略号显示
ai125073509的博客
11-26 2628
文字超过一定字数用省略号显示<!doctype html> <html> <head> <meta charset="utf-8"> <title>文字超过一定字数用省略号显示</title> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js" language="javascr
改变画面html显示outputtext,如何更改一些textOutput元素的字体？
weixin_42593701的博客
06-20 187
在server.R中，我有一堆从本周存储在输出中的指标以及之前测量的指标。如何更改一些textOutput元素的字体？output$x1_current_week output$x2_current_week ...output$x1_previous_week output$x2_previous_week ... 我ui.R我想在中心当前周框来显示当前和前一周的价值观使用CSS定义自定义字体/...
用echarts做知识图谱节点图形的文本标签太长解决办法
qq_46034741的博客
04-11 1132
首先，ECharts 提供了相关的配置选项来解决这个问题。​表示最大显示长度，当节点的文本超出这个长度时，它将以省略号表示。​ 函数用于截断超出指定长度的字符串并添加省略号。​ 函数来对节点标签进行自定义。​ 函数对文本进行省略。​ 函数，自定义节点文本标签的显示方式。
h:outputText输出HTML标签
两粒种子，一片森林
01-28 7537
h:outputText有一个  escape 属性用来处理html 标签. 默认值为true.这意味着所有特殊的符合都被转义为&代码.   This is a text"/> 打印的结果是: This is a text escape="false" value="This is a text"/> 打印的结果是: This is a text  
css限制显示字数，文字长度超出部分用省略号表示
热门推荐
OrangeJuiceMe
03-09 8万+
为了保证页面的美观整洁，在文字太多的时候，我们常需要隐藏超出长度的文字。在题目，名称，列表条目等地方常用到。 (1).html中文字超出一行，省略超出部分，显示'...' 如果这种情况比较多，可以取一个切合作用的类名用于复用。 .line-limit-length { overflow: hidden; text-overflow: ellipsis; white-space: now
在td标签中文字超出显示省略号，鼠标悬停显示所有文本
weixin_43383479的博客
04-30 8257
在td标签中文字超出显示省略号，鼠标悬停显示所有文本 首先得在table的style中加入table-layout:fixed，让表格固定，然后用width设定表格的宽度。 然后表格中所有的列都一样宽了，这样肯定不好，所以要在tbody上加入<col style="width:10%">这个标签，有几列就加几个，这样就能调节宽度了 然后在td标签中加入如下的属性 <td styl...
使用 CSS来完成 表格、span 中用省略号 ...代替过长文字
前前
12-08 309
[code="html"] table{table-layout: fixed} td {text-overflow:ellipsis;overflow: hidden;} span {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;/*just for IE */} ...
JSF的h:outputText 实现根据条件判断是否标红值显示
渴望飞的鱼的博客
06-12 1341
原来代码： <h:outputText value="#{snOrderInvoice.cust_name}" /> 处理方法： 当需要根据自己定义的值去判断的时候，需要添加上：style="color:red" 即可。同时，需要添加rendered去判断条件。 上代码： <h:outputText style="color:red" value="#...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值