Quando si utilizza l'overflow CSS: nascosto, ho spesso trovato che l'ultima riga di testo viene parzialmente tagliata. C'è un modo per prevenire questo in modo che le linee parziali non vengano visualizzate. Quasi come una trama verticale.CSS: puoi prevenire l'overflow: nascosto dal tagliare l'ultima riga di testo?
Rob è corretto. Stavo facendo un div che aveva un altezza massima di 11em e l'ultima riga di testo di overflow era solo la metà lì. white-space: nowrap elimina l'ultima riga tutto insieme.
Ho provato
white-space: nowrap;
e Gaby è anche vero che questo provoca problemi.
Il migliore mi è venuta era a giocherellare con l'altezza line-height e div fino a quando le linee di minor numero sono stati tagliati-off
funziona solo perché l'ultima linea è stata prodotta da un lungo ritorno a capo. Se ci fosse un
in esso, sarebbe ancora parzialmente mostrato .. È necessario assicurarsi che l'altezza del div possa essere esattamente diviso per la sua altezza di riga. –
Ha senso. Ho fatto l'altezza del div qualcosa come 11em. Farebbe qualche differenza? –
Questa soluzione ha funzionato per me: https://stackoverflow.com/a/17413577/2540428 creare Essenzialmente un div involucro con l'imbottitura adeguata e metti il contenuto nel div principale dove modifichi la sua altezza e nascondi l'overflow. Vedi il link per maggiori dettagli.
È possibile utilizzare involucro div e multi-colonna css:
.wrapper {
-webkit-column-width: 150px; //You can't use 100%
column-width: 150px;
height: 100%;
}
Soluzione esempio:http://jsfiddle.net/4Fpq2/9/
Aggiornamento 2017-09-21
In Firefox questa soluzione funziona ancora ma rotto in Chrome. Recentemente Chrome ha iniziato a interrompere la colonna in base a parti ridotte, inoltre interrompe il contenuto interrotto se si imposta l'altezza. In questo esempio di http://jsfiddle.net/4Fpq2/446/, cambio altezza in altezza massima e mostro strano comportamento di Chrome. Se avete idee, scrivete nei commenti.
Funziona per me. :) Non riesco a farlo funzionare con 'text-overflow: ellipsis', però. È possibile? –
In questo metodo, non c'è overflow. Pertanto, l'overflow di testo: i puntini di sospensione non funzioneranno. Le regioni CSS possono aiutare ma: http://caniuse.com/#feat=css-regions :( – stalkerg
Peccato che questo non funzioni con il 100% :( – Swen
Esistono due proprietà css3. 1) interruzione di parole & 2) word-arap
Non dimenticare che si tratta di una nuova proprietà css3. In modo che i browser più vecchi non supportano tale proprietà.
.class-name {word-break: break-all;}
.class-name {word-wrap: break-word;}
[Non funziona] (http://jsfiddle.net/8takLekq/) in IE, Chrome o Firefox. –
Una volta capito come il column-width lavoro, @ risposta di stalkerg fa un sacco di senso.
Il column-width divide il contenuto in colonne, in modo che l'ultima riga del testo non si adatti, verrà spostata nella colonna successiva. Ora il trucco è rendere la larghezza della colonna larga quanto il contenitore. Il contenitore ha overflow: nascosto, quindi la seconda colonna non mostra lo spettacolo.
.box {
width: 200px;
}
.container {
-webkit-column-width: 200vw;
-moz-column-width: 200vw;
column-width: 200vw;
height: 100%;
}
basta aggiungere l'attributo di larghezza di colonna e impostare la larghezza del contenitore, funzionerà.
che ha funzionato per me:
.wrapper_container{
width: 300px;
height: 200px;
overflow: hidden;
}
.wrapper{
-webkit-column-width: 300px;
column-width: 300px;
height: 100%;
}
forniscono un esempio? forse pasticciare con l'altezza della linea sull'ultimo elemento. –
Vuol dire che il contenuto è tagliato a metà riga, quindi la metà superiore dei caratteri mostra ma non il fondo.AFAIK non ci sono soluzioni per questo, a parte l'avvitamento con l'altezza della linea (che non sarebbe comunque una soluzione cross browser) – Rob
perché stai usando un overflow? contenere i galleggianti? o hai davvero bisogno di nascondere cose che traboccano? –