ritaglia il testo troppo lungo all'interno di div

86

<div style="display:inline-block;width:100px;">

very long text
</div>

qualsiasi modo per usare il css puro per tagliare il testo che è troppo lungo piuttosto che mostrarlo sulla nuova riga successiva e mostrare solo max 100px

html css

— cometta
fonte

56

<div class="crop">longlong longlong longlong longlong longlong longlong </div>

Questo è un possibile approccio a cui riesco a pensare

.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}

In questo modo il testo lungo andrà ancora a capo ma non sarà visibile a causa del overflowset, e impostando lo line-heightstesso heightci assicuriamo che verrà visualizzata solo una riga.

Guarda la demo qui e una bella descrizione della proprietà di overflow con esempi interattivi.

— Davor Lucic
fonte

1

Non conterei su "line-height" per evitare il wrapping perché è possibile che l'utente abbia modificato le impostazioni del carattere (per il testo più piccolo) nel browser. Allo stesso modo per i caratteri grandi, se hai fissato l'altezza del div al numero di pixel, potrebbe sembrare terribile. Soprattutto con i browser mobili e gli schermi "retina", proverei a lasciare l'altezza del div flessibile se il layout del design lo consente, cosa che dovrebbe!

— PJ Brunet

155

Puoi usare:

overflow:hidden;

per nascondere il testo fuori dalla zona.

Nota che potrebbe tagliare l'ultima lettera (quindi una parte dell'ultima lettera verrà comunque visualizzata). Un modo migliore è visualizzare un'ellissi alla fine. Puoi farlo usando text-overflow:

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;

— Arseni Mourzenko
fonte

spazio bianco: nowrap non è davvero così necessario perché ho più righe che mostrano un lungo percorso di file. Senza spazi bianchi, il percorso lungo indistruttibile riceverà i puntini di sospensione, quindi la riga successiva mostrerà il resto del percorso. Il vantaggio è che posso copiare il testo (inclusi i puntini di sospensione) e poi incollerà l'intero percorso. Bello!

— Robert Koch

Nel caso ti stavi chiedendo (come me) i puntini di sospensione non funzioneranno nelle versioni precedenti di Firefox. "Dalla versione 7 di Firefox text-overflow: ellipsis è supportato." stackoverflow.com/questions/5990414/…

— PJ Brunet

cosa succede se desideri avere un suggerimento al passaggio del mouse per visualizzare il testo completo o qualcosa di simile?

— pedrorijo91

2

@ pedrorijo91 Potresti semplicemente usarlo title="full text goes here"nell'html.

— Jerry

28

.crop { 
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow:ellipsis; 
  width:100px; 
}

http://jsfiddle.net/hT3YA/

— s1ntez
fonte

9

Perché non utilizzare le unità relative?

.cropText {
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

— Tomas Macek
fonte

4

Il codice sottostante nasconderà il testo con una larghezza fissa che decidi tu. ma non del tutto adatto per i design reattivi.

.CropLongTexts {
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Aggiornare

Ho notato nei dispositivi (mobili) che il testo (mescolato) tra loro a causa di (larghezza fissa) ... quindi ho modificato il codice sopra per nasconderlo in modo reattivo come segue:

.CropLongTexts {
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

La (larghezza massima) garantisce che il testo venga nascosto in modo reattivo qualunque sia la (dimensione dello schermo) e non si mischi tra loro.

— Mizo Games
fonte

3

Sebbene questo codice possa rispondere alla domanda, fornire un contesto aggiuntivo sul perché e / o come questo codice risponde alla domanda ne migliora il valore a lungo termine.

— Paperino il

1

   .cut_text {
      white-space: nowrap; 
      width: 200px; 
      border: 1px solid #000000;
      overflow: hidden;
      text-overflow: ellipsis;
    }

<div class="cut_text">

very long text
</div>

Espandi lo snippet

— Supriya
fonte