强制换行输出标签答案

【问题标题】：Force linebreak OutputLabel强制换行输出标签
【发布时间】：2013-05-02 13:12:43
【问题描述】：

我有一个 outputLabel 包含很多文本（大约 5000 个字符的文本）， outputLabel 必须在该行大约 200px 之后添加一个新行，这可能吗？

<p:outputLabel value="#{object.body}" />
<p:outputLabel value="#{object.body}" style="width: 200px" />

此代码不起作用：

public String getBodyWithLineBreaks(){
    return body.replaceAll("(.{100})", "$1<br/>");
}

这也不是一个解决方案，因为此方法不查看单词是否完成，它只是从第 100 个字符开始换行。

更多代码：

<p:dataTable id="dataTable" var="object" value="#{notificationOverview.objects}">

     <!--Some more columns...-->  

    <p:rowExpansion>  
        <h:panelGrid id="display" columns="2" cellpadding="4" style="width:300px;"  
                                                 styleClass=" ui-widget-content grid">  
        <f:facet name="header">Notification Information</f:facet>
        <h:outputText value="Sender:"/>
        <h:outputText value="#{object.sender.username}"/>

        <h:outputText value="Time send:"/>
        <h:outputText value="#{object.dateSend}">
            <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss"/>
        </h:outputText>

   <h:outputText value="Title:"/>
   <h:outputText value="#{object.title}"/>
</h:panelGrid>

<br/><br/>

<div style='width: 200px;'>
   <h:outputText value="#{object.body}" />
</div>
</p:rowExpansion>
</p:dataTable>

【问题讨论】：

标签： css jsf primefaces line-breaks

【解决方案1】：

<p:outputLabel> 生成 HTML <label> 元素，默认情况下为 inline element。您不能设置内联元素的尺寸。您只能在 block element 上设置它。

一种方法是将display: block 添加到样式中。

<p:outputLabel value="#{object.body}" style="display: block; width: 200px;" />

此外，鉴于这是在 <p:dataTable> 单元格中，默认情况下其 CSS white-space 属性设置为 nowrap，您需要将其设置回 normal。这可以在同一个组件上设置，但最好在父<p:column> 本身上设置：

<p:column style="white-space: normal;">

注意：作为良好做法的一部分，您应该更喜欢 styleClass 而不是 style。

与具体问题无关，HTML <label> element 旨在标记由for 属性标识的输入元素。 IE。当您单击它时，关联的输入元素会检索焦点（并选择复选框/单选按钮）。执行验证时，标签用于标识输入元素。但是，您尝试在标签元素内显示 5000 个字符（当用作真实标签时对用户完全不友好）这一事实表明，您实际上是在滥用标签来显示“纯文本”的错误目的。您应该改用<h:outputText>。这会生成一个 HTML <span> 元素，默认情况下它也是一个内联元素。所以上面的答案也适用于：

<h:outputText value="#{object.body}" style="display: block; width: 200px;" />

【讨论】：