3

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

<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应该可以解决问题，但它的渲染范围更广，即使我将其设置为 100 像素，它也会将其渲染为 400 像素，而不会注意到!important.

4

1 回答 1

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

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

在块格式化上下文中，框从包含块的顶部开始一个接一个地垂直排列。两个同级框之间的垂直距离由 'margin' 属性确定。块格式化上下文中相邻块框之间的垂直边距折叠。

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

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

于 2013-04-09T08:44:25.013 回答