オーバーフロー：最後の非表示のドット

205

「大きなお尻が好きで嘘をつくことができない」という文字列があり、でカットしたとするとoverflow:hidden、次のように表示されます。

私は大きなお尻が好きで、私はできません

テキストを切り取ります。これを次のように表示することは可能ですか？

私は大きなお尻が好きで、私はできません...

CSSを使用していますか？

html  css 
— Mannicken
ソース
46
この質問は、曲を宣伝するための策略ですか？
— Cyril Gupta、
12
@CyrilGupta返信が遅くなってすみません。私はトイレに走らなければなりませんでした。あなたの質問に答えるために...はい
— Joe Phillips
1
— Termininja

回答:

282

テキストオーバーフローを使用できます。これcaniuseに応じてすべての主要なブラウザでサポートされています。

ここにjsbinのデモがあります。

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}
<div class="cut-text">
I like big buts and I can not lie.
</div>
スニペットを展開

— ジョー・フィリップス
ソース
これはFirefox 15.0.1で機能するようでした
— Jace
はい、新しいバージョンで動作するようです。明らかに、この回答は現時点で数年前のものです。
— ジョーフィリップス
Firefoxは2011年の後半にリリースされたバージョン7のようにこれをサポートするために始めた
— リチャードのEvに
1
私の常識を使用して、投票とコメントに基づいてこの答えが「正しい」と言うことができます。しかし、私はこの答えがどのように「正しい」かを実際に見ることができません。私は要素overflow: hidden;とブロック要素の両方を使用していて、最後に何もないことを確認しました（もちろん、実際にオーバーフローであることを確認しています）。私もせずにこれを試した部分、そしてまたして内部の要素要素要素を持っていたし、持っていた私がしようとどのように関係なく、これは...失敗ですtext-overflow: ellipsis;<p>...overflow: hidden;<span><p><p>overflow: hidden;<span>text-overflow: ellipsis;
— VoidKing
2
まあ、私は問題を知っていると思います。に基づいてオーバーフローを制限しようとしているため、設定max-heightできませんでしwhite-space:たnowrap
— VoidKing
88

次のスニペットで問題を確認してください 

div{
  width : 100px;
  overflow:hidden;
  display:inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<div>
    The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. Colonel Boris Pash, a former Manhattan P
</div>
スニペットを展開

— アルジュン
ソース
4
「ホワイトスペース：nowrap;」を追加するためのものです。これは、いくつかのケースで必要になる可能性があります
— レオ
2
テキストを2行表示するようにしてから非表示にする方法
— Martian2049
1
@ Matian2040固定の高さとオーバーフローの非表示スタイルを指定して調整できます。このフィドルをチェックしてくださいjsfiddle.net/5135L4bx
— Arjun
1
ああなるほど。私は試した。しかし、それは2行が最後に...がないことを意味することを意味しているようです？
— Martian2049 2016
1
display: inline-block;私にとって欠けていたコンポーネントでした。ありがとうございました。
— Seth
18

ラインを3本までに制限し、3本のラインの後にドットが表示されるようにするには、これを試してください。行を増やしたい場合は、-webkit-line-clampの値を変更し、divサイズの幅を指定します。

div {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}
— ナジェンドラマタラ
ソース
申し訳ありませんが、そのような言葉をどのように削除したかわかりません！
— Alec、
Chromeではうまく機能しますが、Firefoxでは機能しません
— Ken Bigler
Firefoxなどの別のブラウザでこれを行うにはどうすればよいですか？編集：stackoverflow.com/questions/33058004/...
— user3187724
17

うまくいけば、それはあなたのために役立ちます：

.text-with-dots {
    display: block;
    max-width: 98%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
<div class='text-with-dots'>Some texts here Some texts here Some texts here Some texts here Some texts here Some texts here </div>
スニペットを展開

— ブファン
ソース
8

では、ブートストラップ4、あなたは追加することができます.text-truncate省略記号でテキストを切り捨てるようにクラスを。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 190px;">
  I like big butts and I cannot lie
</span>
スニペットを展開

— ペニー・リュー
ソース
6 
<style>
    .dots
    {
        display: inline-block;
        width: 325px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    .dot
    {
        display: inline-block;
        width: 185px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }
</style>
— かわいい
ソース
3

ほとんどのソリューションでは、静的な幅を使用しています。しかし、それは時々いくつかの理由で間違っている可能性があります。

例：多くの列を持つテーブルがありました。それらのほとんどは狭いです（静的な幅）。ただし、メインの列はできるだけ広くする必要があります（画面サイズによって異なります）。

HTML：

<table style="width: 100%">
  <tr>
    <td style="width: 60px;">narrow</td>
    <td>
      <span class="cutwrap" data-cutwrap="dynamic column can have really long text which can be wrapped on two rows, but we just need not wrapped texts using as much space as possible">
        dynamic column can have really long text which can be wrapped on two rows
        but we just need not wrapped texts using as much space as possible
      </span>
    </td>
  </tr>
</table>

CSS：

.cutwrap {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 18px;
  white-space: normal;
  color: transparent !important;
}
.cutwrap::selection {
  color: transparent !important;
}
.cutwrap:before {
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
/* different styles for links */
a.cutwrap:before {
  text-decoration: underline;
  color: #05c;
}
— マジュ
ソース
3 
<!DOCTYPE html>
<html>
<head>
<style>
.cardDetaileclips{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* after 3 line show ... */
    -webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div style="width:100px;">
  <div class="cardDetaileclips">
    My Name is Manoj and pleasure to help you.
  </div>
</div> 
</body>
</html>
— マノイパテル
ソース
-1

ロード時にテキストを非表示にし、ホバー時に表示 

<span class="hide-text"> How to hide text by dots and show text on hover</span>

.hide-text {
    width: 70px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }

  span:hover {
     white-space: unset;
     text-overflow: unset;
  }
— ロヒト・パルテ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.