h:outputText 字符串中长单词的换行符答案

【问题标题】：h:outputText line break for long words within stringsh:outputText 字符串中长单词的换行符
【发布时间】：2011-06-01 05:10:06
【问题描述】：

有没有办法告诉 JSF (2.0) 的 h:outputText 在字符串中很长的单词中插入换行符（或者更好：像“-”这样的自定义字符串）？我的问题是，当我在没有空格的字符串中有一个很长的单词时，我的数据表（PrimeFaces）变得太宽。当我有一个长文本“正常”单词时，它可以工作，然后下一个单词会打印在下一行。

虽然我可以使用转换器，但这仍然意味着我必须在字符串中查找长单词，然后在每次显示文本时剪切它们。这对于少量数据会以某种方式起作用，但当数据库变得更大时需要大量的处理能力（而且它会）。

我还可以在插入数据库之前扫描字符串中的长词，这意味着我只需要处理一次字符串，而且如果我曾经有过的话，我无法完全重建原始字符串需要它。

有人对此有意见吗？

提前感谢您和最诚挚的问候，罗伯特

【问题讨论】：

@Robert M. 嗨，我也有同样的问题。 Balus C 答案对我不起作用，但我使用的是 jsf1.2，如果你显示你的代码，那么它对我很有用。
BalusC 的解决方案不依赖于使用的 JSF 版本。这是一个简单的 CSS 解决方案。 styleClass 属性存在于 JSF 1.2 中，并将“类”属性呈现给生成的 HTML 输出。如果它不起作用，这是您的 HTML/CSS 中的问题。您可以尝试为父 HTML 元素设置固定宽度。

标签： string jsf jsf-2 primefaces

【解决方案1】：

 <h:outputText value="Very Wordy&lt;br /&gt;Table Column&lt;br /&gt;Heading" escape="false" />

输出

Very Wordy
Table Column
Heading

【讨论】：

来源：blog.michaelscepaniak.com

【解决方案2】：

将相关元素的 CSS word-wrap 属性设置为 break-word。

<h:outputText styleClass="someClass" />

与

.someClass {
    word-wrap: break-word;
}

【讨论】：

这对我不起作用。 css 类显示在 firebug 中匹配的 css 规则中，但我不知道为什么长词没有中断。
@djaqeel：先决条件是元素具有固定宽度。
哦，谢谢。你说的对。当我给出固定宽度时，它工作正常，但我想给出 % 宽度。在 %age 宽度中，自动换行很好，但跨度本身占用整个宽度（好像它在应用自动换行之前计算跨度的宽度）。

【解决方案3】：

这可以通过两个步骤来完成

1)将样式应用为表格布局：固定到panelGrid

例如： <h:panelGrid style="table-layout:fixed;">

2) 然后将自动换行断词的样式应用于<h:outputText />，如下所示。

例如： <h:outputText style="word-wrap:break-word;">

希望这会有所帮助。

【讨论】：

【解决方案4】：

你可以使用 h:inputTextarea 而不是 h:outputText ，不要记住设置 readonly 属性为 true 并像这样删除边框：

<h:inputTextarea  rows="10" cols="50" readonly="true" value="multiline String"  style="border-color: white"  />

【讨论】：

【解决方案5】：

如果字符串中有很长的单词，可以像这样使用word-break: break-all;：

<h:outputText value="111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111" style="word-break: break-all;"/>

但它需要 CSS3。链接：word-break

【讨论】：

【解决方案6】：

接受的答案对我不起作用。使用“空白：正常”修复它。

<h:outputText value="long text" style="white-space: normal"/>

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助、质量更好，并且更有可能吸引投票