BinaryDevelop
  1. ホーム
  2. javascript

左側のテキストオーバーフローの省略記号

2023-12-01 20:26:48

質問

私はパスのリストを持っています（より良い言葉の不足のために、多分パンくずのトレイルは、それらをよりよく説明します）。いくつかの値は、その親で表示するには長すぎるため、私は使用しています。 text-overflow: ellipsis . 問題は、重要な情報は右側にあるので、省略記号を左側に表示させたいのです。このアスキーアートのようなものです。 

----------------------------
|first > second > third    |
|...second > third > fourth|
|...fifth > sixth > seventh|
----------------------------

最初の行は十分に短いので左揃えのままですが、他の2行は長すぎるので省略記号が左側に表示されることに注意してください。

私は CSS だけのソリューションを希望しますが、避けられない場合は JS でもかまいません。Firefox と Chrome でのみ動作するソリューションでもかまいません。

EDITです。 この時点で私は、ドキュメントに RTL と LTR が混在している場合に正しくレンダリングできない Chrome のバグに対する回避策を探しています。当初から本当に必要なのはそれだけだったのですが、私がそれに気づかなかっただけなのです。

どうすれば解決するのか？

ついにJavaScriptを割って何かをすることになりました。誰かが CSS で解決してくれることを期待していたのですが、人々は単に が必要です。 は正しいはずです。 j08691 は、彼の仕事のために懸賞金をもらうことができます。 . 

<html>
    <head>
        <style>
            #container {
                width: 200px;
                border: 1px solid blue;
            }

            #container div {
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
            }
        </style>
        <script>
            function trimRows() {

                var rows = document.getElementById('container').childNodes;
                for (var i=0, row; row = rows[i]; i++) {
                    if (row.scrollWidth > row.offsetWidth) {
                        var textNode = row.firstChild;
                        var value = '...' + textNode.nodeValue;
                        do {
                            value = '...' + value.substr(4);
                            textNode.nodeValue = value;

                        } while (row.scrollWidth > row.offsetWidth);
                    }
                }
            }
        </script>
    </head>
    <body onload='trimRows();'>
    <div id="container" >
        <div>first > second > third</div>
        <div>second > third > fourth > fifth > sixth</div>
        <div>fifth > sixth > seventh > eighth > ninth</div>​
    </div>
    </body>

</html>

フィドル

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します