HTML/CSS "Truncation reattivo"

Question

Di recente ho lanciato una versione reattiva del mio sito, tuttavia sto scoprendo che le divisioni di larghezza percentuale contenenti una serie di singole righe di testo sembrano davvero male, poiché si adatta a tutto su una singola riga sia nel desktop che nelle visualizzazioni mobili risultati in ogni singola riga di testo che è troppo lungo o troppo corto.

Il mio markup è un unico elenco non ordinato di collegamenti (con testi di ancoraggio a lungo) - qualcuno ha qualche suggerimento per troncare il testo di ancoraggio in base alla larghezza della divisione contenente?

Answer 1

I can come up with two options:

One is to do it yourself using javascript as described here:

Calculate text width with JavaScript

I don't think there is any way to determine the width of the text until the browser actually renders the text.

Make sure you don't display: none it, or the browser won't actually render it and you can't determine the width.

The second is to let CSS do it for you; it's easier, but you lose pretty much all flexibility:

If you're willing to let CSS guess at how to cut off your text into ellipsis, you can try text-overflow: ellipsis

http://www.quirksmode.org/css/textoverflow.html