Keskustelu: Nettisivujen teko: Tekstin lyhennys tiettyyn tilaan

Onko olemassa mitään järkevää tapaa lyhentää tekstiä johonkin tiettyyn pituuteen, sillein että se kuitenkin täyttäisi mahdollisimman paljon tarjolla olevasta tilasta? Esimerkiksi jos divin leveydeksi on määritetty 100 pikseliä ja siihen pitäisi pistää pitkästä tekstistä niin paljon kuin mahtuu ja perään kolme pistettä. Yleensähän fonteissa eivät kaikki kirjaimet ole saman levyisiä, joten kirjaimien määrän rajoittaminen tiettyyn ei oikein toimi halutulla tavalla. Yksi tapa on tietysti laskea jokaisen kirjaimen leveys pikseleissä ja rajoittaa teksti tämän perusteella, mutta kaikilla käyttäjillä ei välttämättä ole sitä samaa fonttia tai fontti voi olla erikokoinen. Onko tähän jotain kikkaa vaikka css:n puolelta?

Javascriptillä voisi luultavasti tehdä niin että lyhentää tekstiä niin kauan kunnes se on riittävän lyhyt.

Milläs sitten tunnistetaan, että teksti on riittävän lyhyt?

Käytä tasalevyisiä fontteja.

Laita teksti ylimääräiseen elementtiin, niin JS-ratkaisu onnistuu aika helposti. Seuraava koodi on vedetty hatusta, kokeile sitä.

<div id="laatikko"><span>Teksti, joka ei mahdu laatikkoon.</span></div>

#laatikko {
  width: 100px;
  height: 1em;
  border: 1px solid black;
}

function lyhenna(div) {
  var span = div.firstChild;
  var text = span.firstChild;
  while ((span.offsetWidth > div.clientWidth || span.offsetHeight > div.clientHeight) && text.nodeValue.length) {
    text.nodeValue = text.nodeValue.replace(/(.*) [^ ]+$/, '$1...');
  }
}

window.onload = function() {
  lyhenna(document.getElementById("laatikko"));
}

Ilman JS:ää surfaavien iloksi kannattaa vielä piilottaa CSS:llä kaikki ylimääräinen:

#laatikko {
  overflow: hidden;
}

Lisäksi on tietysti järkevintä tehdä edes jonkinlainen arvaus tekstin pituudesta jo palvelinpuolella, jottei turhaan lähetetä selaimelle useita kilotavuja pitkää viestiä.

jQueryyn valmis plugari http://www.adamcoulombe.info/lab/jquery/width-truncate/