0

タイトルが示すように、私は PrimeFaces を使用しており、ap:PanelGrid 内に h:outputText があります。h:outputText の「value」フィールドに挿入された非常に長い、途切れのない文字列がある場合は常に、h:outputText によって作成されたスパンと p:panelGrid によって作成された td をオーバーフローし、ページ。1 つの長く切れ目のないテキスト文字列である必要がありますが、常に境界からはみ出してしまいます。style="overflow: scroll;" を追加してみました および style="width: 100px;" 、およびその他の可能な修正がありますが、テキストには何もありません. なぜこれが起こっているのか、それを修正するために何ができるのか、誰にも分かりませんか?

読んでくれてありがとう。素晴らしい一日を。

:-)

4

2 に答える 2

0

静的な幅を設定しても、それ自体は役に立ちません。ただし、要素の幅がわかっている場合（「自動」に設定されていない場合）は、overflow: scroll正常に機能するはずoverflow:hiddenです。overflowルールがスタイルシートの他の場所でより具体的なルールによって上書きされている可能性はありますか？それが原因である可能性が最も高いと私は思います。

その情報の一部を失っても問題がない場合（たとえば、ホバー時に文字列全体にアクセスしたり、アイコンをクリックしたりする場合）、次の情報を組み合わせることができます。

.someElement {
  overflow: hidden;
  text-overflow: ellipsis;
}

サポートしているブラウザtext-overflow: ellipsis（すべてのブラウザではありません）では、切り捨てポイントに省略記号が表示されます。そうしないと、コンテナの端で切断されてしまいます。

要約すると：

  • オーバーフロー：スクロールはすでに機能しているはずです。そうでない場合は、それに取って代わる別のルールがあります。
  • プロジェクトの要件に違反しない場合は、スクロールバーの代わりに省略記号ソリューションを検討することをお勧めします。
于 2012-12-09T04:12:53.230 に答える
0

読んで返信してくださった皆様。結局のところ、これは Primefaces の問題ではなく、HTML/CSS の問題です。したがって、この質問を再投稿します。時間を割いて読んで返信していただきありがとうございます。以下は、私の問題の簡単な HTML 複製と、言及されているいくつかの提案です。

<!DOCTYPE html>
<html>
    <head>
        <title> problem </title>
        <style type="text/css">
            span.troubleSpan {
                overflow: hidden;
                text-overflow: ellipsis;
                word-wrap: break-word;
            }
        </style>
    </head>
    <body>
        <h4> problem </h4>
        <div>
            <table border="1">
                <tr>
                    <td>
                        <span>cell</span>
                    </td>
                    <td>
                        <span>&nbsp;</span>
                    </td>
                    <td>
                        <span>cell</span>
                    </td>
                    <td>
                        <span class="troubleSpan">asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</span>
                    </td>
                    <td>
                        <span>&nbsp;</span>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>
于 2012-12-09T04:37:25.653 に答える