Question

我正在尝试使用以下代码在面板中显示状态注释：

<p:panel>
    <ui:repeat var="Comment" value="#{Status.commentList}">
        <h:outputText value="#{Comment.Text}"/>
    </ui:repeat>
</p:panel>

似乎评论时间很长，文本从面板溢出。我已经对它进行了调查，发现h:outputText正在生成一个跨度并试图通过CSS解决这个问题：

<h:outputText value="#{Comment.Text}"
    style="width: 100px!important; overflow-x: scroll!important;"/>

给定一个固定的宽度和overflow-x:scroll应该可以做到这一点，但它会使范围扩大得更宽，即使我将其设置为100px，它也会将其渲染为400像素，而不会注意到!important。

Answer 1

<h:outputText value="#{Comment.Text}"
    style="width: 100px; overflow-x: scroll; display:block;"/>

是正确的方法。 W3说display:block;

在块格式化上下文中，框一个接一个地布局，   垂直，从包含块的顶部开始。垂直的   两个兄弟框之间的距离由'边距'决定   属性。块中相邻块框之间的垂直边距   格式化上下文崩溃。

在块格式化上下文中，每个框的左外边缘都接触到   包含块的左边缘（从右到左格式化，右边   边缘触摸）。即使在浮子的存在下也是如此（尽管如此）   盒子的内容区域可能因浮动而缩小。

这证明了为什么我的文本溢出它需要作为上下文值处理。

JSF outputText溢出

1 个答案: