web-dev-qa-db-ja.com

CSSを使用して長いテキストを小さな固定列に示すにはどうすればよいですか？

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

与えられた文字列：

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

固定幅の列に必要な出力は次のとおりです。

Some really long string...
cssstringtruncate
29
Primoz Rome

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 */
}

注：最新のブラウザーサポートを確認してください。

73
Gordon

ちょうどゴードンの答えのようないくつかのCSSで。 display:blockや<a>などのインライン要素の<p>プロパティを追加したところです。

a#myText{
  display: block;
  text-overflow: Ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 300px;
}

あなたはこのリンクで見ることができるように多くのブラウザでそれを使うことができました： http://caniuse.com/#search=text-overflow

2
pierre delaunay

私も同様の問題を抱えていましたが、私が解決した方法は、文字列を60文字に減らし、最後に「...」を追加することでした。

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

Smartyを使用している場合は、次の方法で問題を解決しました。

{$my_string|truncate:60}
0
Ben Everard

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

function truncate_text($string, $min_chars, $append = ' &hellip;') {
    $chars = strpos($string, " ", $min_chars);
    $truncated_string = substr($string, 0, $chars) . $append;
    return $truncated_rstring;
}
0
David Heggie

N文字の後の単純なテキストのカットは、あなたが探しているものではないと思います。次のテキストは両方とも15文字の長さであるため、これは解決策ではありません。iiiiiiiiiiiiiii、mmmmmmmmmmmmmmmmm-2番目の「Word」は最初の「Word」より約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>
0
Crozin