29

1行のテキストしか表示できない固定幅の列に長いテキストを収めるにはどうすればよいですか？テキストは固定幅（たとえば100px）にカットする必要があり、最後にドット「...」を追加したいと思います。たとえば、次のようなものです。

与えられた文字列：

Some really long string that I need to fit in there!

固定幅列の望ましい出力は次のようになります。

Some really long string...
4

5 に答える 5

73

CSSだけでこれを行うことができます：

.box {
    -o-text-overflow: ellipsis;   /* Opera */
    text-overflow:    ellipsis;   /* IE, Safari (WebKit) */
    overflow:hidden;              /* don't show excess chars */
    white-space:nowrap;           /* force single line */
    width: 300px;                 /* fixed width */
}

注: 最新のブラウザー サポートを確認する必要があります。

于 2010-01-21T12:12:17.540 に答える
0

同様の問題が発生しました。解決方法は、文字列を60文字に減らし、末尾に「...」を追加することでした。

醜い解決策？はい。ただし、jQueryソリューションがない限り、おそらく最善の策です。

Smartyを使用している場合、これが私が問題を解決した方法です。

{$my_string|truncate:60}
于 2010-01-21T11:24:50.587 に答える
0

これは、文字列を切り捨てるために使用する関数です。ここでのほとんどの提案と同様に、substr を使用して文字列を切り捨てますが、単語の途中で文字列を分割することは避けます。

function truncate_text($string, $min_chars, $append = ' …') {
    $chars = strpos($string, " ", $min_chars);
    $truncated_string = substr($string, 0, $chars) . $append;
    return $truncated_rstring;
}
于 2010-01-21T11:46:48.253 に答える
0

N 文字の後に単純にテキストを切り取るのは、あなたが探しているものではないと思います。次のテキストは両方とも 15 文字の長さであるため、これは解決策ではありません: iiiiiiiiiiiiiii, mmmmmmmmmmmmmmmm - 2 番目の「単語」は最初の単語よりも約 3 倍長いことに注意してください。

JavaScript が解決策になる可能性があります。

  1. 最初にマークアップを準備します。

    <p id="abc">{TEXT}</p>

    {TEXT}150 文字に切り捨てられたテキストはどこですか+...

  2. JavaScript の適切なベースができたら、探しているものを作成してみましょう。

    <html>
<head> 
    <style type="text/css">
        #abc {
            width: 100px;
        }
    </style>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            var ref  = document.getElementById("abc");
            var text = ref.text;

            ref.removeChild(ref.firstChild);
            ref.appendChild(document.createTextNode("..."));

            var maxHeight = ref.offsetHeight;

            var pos = 0;
            while (ref.offsetHeight <= maxHeight) {
                var insert = text.substring(0, ++pos) + "...";

                var finalReplace = ref.replaceChild(document.createTextNode(insert), ref.firstChild);
            }

            ref.replaceChild(finalReplace, ref.firstChild);
        }, false);
    </script>
</head>
<body>
    <p id="abc">My very, very, very, very, very, very, very long text...</p>
</body>
</html>
于 2010-01-21T11:48:21.737 に答える