Question

我在<pre>内使用<td>标记时遇到问题。我有JSF数据表和三列。我需要所有三列包含预格式化的文本。

如果我使用<pre>标签，则会根据需要预先格式化文本，但列的宽度会比文本大得多。

我可以通过在white-space: pre-line;标记的样式中指定<pre>来解决此问题。但它只适用于Firefox和IE，Chrome忽略了这种风格。

所以我的问题是：有没有办法解决<td>内部包含<pre>标记的宽度？

编辑：

我的css课程：

.dt_row {
    height: 8px;
    margin: 3px 3px 3px 3px;
    color: #000000;
    white-space: pre-line;
}

我的数据表：

    <h:dataTable value="#{searchBean.searchResult.concordances}"
                 var="concordance">

        <h:column>
            <pre class="dt_row">
                #{concordance.left}
            </pre>
        </h:column>

        <h:column>
            <pre class="dt_row" style="color: blue;">
                #{concordance.middle}
            </pre>
        </h:column>

        <h:column>
            <pre class="dt_row">
                #{concordance.right}
            </pre>
        </h:column>

    </h:dataTable>

编辑：

我找到了解决方案。我使用<pre>而不是<code>标签，现在所有数据都完美显示。

Answer 1

pre元素默认占用100％宽度，即整个可用宽度。但是，在表格单元格中，这与单元格宽度有关，默认情况下，pre的单元格与最长行所需的宽度相同。如果不是这种情况，则需要识别导致偏离默认值的代码，并对其进行修改。

例如，如果您在width元素上设置了table属性或属性，则只需删除该设置。

Answer 2

拥有div标记的pre元素并使用overflow中的div属性怎么样？

浏览器会放一个滚动条，但我相信你没问题; - ）

Answer 3

显示表格中文本的截断版本，然后当您将鼠标悬停在单元格上时，显示整个批次有点像工具提示。显然，这可能不适用于您的上下文。

在td中使用pre标签

3 个答案: