Overflow: titik-titik tersembunyi di akhir

205

Katakanlah saya memiliki string " Saya suka puntung besar dan saya tidak bisa berbohong " dan saya memotongnya overflow:hidden, sehingga menampilkan sesuatu seperti ini:

Saya suka puntung besar dan saya tidak bisa

memotong teks. Apakah mungkin untuk menampilkan ini seperti ini:

Saya suka puntung besar dan saya tidak bisa ...

menggunakan CSS?

html css mannicken
sumber

46

Apakah pertanyaan ini tipu muslihat untuk mempromosikan lagu?

Cyril Gupta

12

@CyrilGupta Maaf atas tanggapan yang terlambat. Saya harus lari ke kamar mandi. Untuk menjawab pertanyaan Anda ... Ya

Joe Phillips

1

Kemungkinan duplikat dari Bagaimana saya bisa menampilkan titik ("...") dalam rentang dengan luapan tersembunyi?

Termininja

282

Anda dapat menggunakan text-overflow: ellipsis; yang menurut caniuse didukung oleh semua browser utama.

Ini demo di 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>

Luaskan cuplikan

Joe Phillips
sumber

Ini sepertinya berfungsi di Firefox 15.0.1: w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

Jace

Ya, tampaknya berfungsi di versi yang lebih baru. Jelas jawaban ini sudah berumur beberapa tahun saat ini.

Joe Phillips

Firefox mulai mendukung ini sejak versi 7, yang dirilis pada paruh kedua tahun 2011.

Richard Ev

1

Saya dapat menggunakan akal sehat untuk mengatakan bahwa jawaban ini "benar" berdasarkan suara dan komentar. Namun, saya gagal melihat dalam kenyataan bagaimana jawaban ini "benar". Saya menggunakan keduanya overflow: hidden;dan text-overflow: ellipsis;dalam elemen (yaitu, elemen blok) dan tidak menemukan ...pada akhirnya (tentu saja saya memastikan bahwa itu memang meluap). Saya juga mencoba ini tanpa overflow: hidden;bagian, dan juga dengan elemen di dalam elemen di mana elemen memiliki overflow: hidden;dan memiliki text-overflow: ellipsis;Tidak peduli bagaimana saya mencoba, ini gagal ..

VoidKing

2

Saya rasa saya tahu masalahnya. Saya mencoba untuk membatasi overflow berdasarkan max-heightjadi saya tidak dapat white-space:mengatur kenowrap

VoidKing

88

Periksa cuplikan berikut untuk masalah Anda

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>

Luaskan cuplikan

Arjun
sumber

4

untuk menambahkan "ruang putih: nowrap;" yang mungkin diperlukan dalam beberapa kasus

leo

2

bagaimana cara membuat teks untuk menampilkan 2 baris kemudian menghilang?

Martian2049

1

@ Matian2040 Anda dapat menyesuaikan dengan memberikan ketinggian tetap dan gaya tersembunyi melimpah, periksa biola ini jsfiddle.net/5135L4bx

Arjun

1

Oh begitu. Saya mencoba. namun sepertinya dua baris berarti tidak akan ada ... pada akhirnya?

Martian2049

1

display: inline-block;adalah komponen yang hilang untuk saya. Terima kasih.

Seth

18

Coba ini jika Anda ingin membatasi garis hingga 3 dan setelah tiga garis titik-titik akan muncul. Jika kita ingin menambah garis, ubah saja nilai -webkit-line-clamp dan beri lebar untuk ukuran div.

div {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

Nagendra Matala
sumber

maaf, saya tidak yakin bagaimana saya menghapus kata-kata Anda seperti itu!

Alec

berfungsi dengan baik di Chrome, tetapi perhatikan bahwa ini tidak akan berfungsi di Firefox

Ken Bigler

Bagaimana saya melakukan ini di browser lain, katakanlah Firefox? Edit: stackoverflow.com/questions/33058004/…

user3187724

17

Semoga bermanfaat bagi Anda:

.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>

Luaskan cuplikan

Vu Phan
sumber

15

Ya, melalui text-overflowproperti di CSS 3. Peringatan: itu belum didukung secara universal di browser.

ceejayoz
sumber

3

Dukungan browser sangat bagus sekarang, per Februari 2012. Lihat caniuse.com/#search=text-overflow

Simon East

1

Ah, kaulah alasan pertanyaan ini muncul tiga tahun kemudian.

Tuan Lister

8

Di bootstrap 4 , Anda bisa menambahkan .text-truncatekelas untuk memotong teks dengan elipsis.

<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>

Luaskan cuplikan

Penny Liu
sumber

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>

Cuteboy_Max
sumber

3

Sebagian besar solusi menggunakan lebar statis di sini. Tetapi terkadang bisa salah karena beberapa alasan.

Contoh: Saya punya tabel dengan banyak kolom. Kebanyakan dari mereka sempit (lebar statis). Tetapi kolom utama harus selebar mungkin (tergantung pada ukuran layar).

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;
}

Maju
sumber

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>

manoj patel
sumber

-1

sembunyikan teks saat memuat dan tampilkan di kursor

<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;
  }

Rohit Parte
sumber

Overflow: titik-titik tersembunyi di akhir

Jawaban: