jQuery/JS dele tekst i DIV op i to efter 5 linier

Så skal du nok gøre det lidt anderledes:

http://www.leancrew.com/all-this/2007/12/source-code-line-numbers-and-javascript/

Her smider han linie numre ind med regex i <code> elementer i <pre>.. Der må du kunne dele din streng.

/J

//5 linier
$("div").css('height', '5em');
//foldet ud
$("div").css('height', 'auto');

hej Jokke,

mener du at jeg kan måle linierne ved måle højden i den i EM ?

ja hvis du har skrevet fornuftig CSS, alternativt bliver du nød til at læse højden på 5 linier, ellers vil du aldrig ramme noget der er lidt browser compatibelt.

ex (psuedo)



var FiveLinesToPx = $("<div><br/><br/><br/><br/><br/></div>").height();
$("div").css('height', FiveLinesToPx+"px");

Den skulle lige skubbes i DOM før den fik en højde :/

var FiveLinesToPx = $("body").append("<div id='ttt'><br/s><br/>s<br/>s<br/>s<br/>s</div>").height();
$('#ttt').remove();

ok, super kode du har lavet, gav mig en masse ideer.

Nu har jeg testet det i 800 browsere med 6 font-families. Det eneste der lige gik lidt galt var ComicSans på IE, men det var mikroskopisk. Det holdt alle en PX højde på 54PX med en line-height på 18PX, præcist på 3 linier. (undtaget comicsans som gik 55PX).

Så det er sådan set ok, så kan man lave overflow hidden på boxen og vise resten ved klik på en knap.

Men jeg kan ikke se det gør det muligt at hive teksten der er udover det 54PX ud i en variabel, i tilfælde af fx. at man ville have det over i en ny kolonne. sådan af teksten inden for 54px ligger i 1.kolonne og udover det i 2.kolonne. ligesom en avis fx..

:-)

ok nu har jeg siddet og kigget på den.
Det er altså den mærkeligste kode den der. jeg kan godt forstå princippet. men der er i starten en kommando

var isIE = navigator.appName.indexOf('Microsoft') != -1;
if (isIE) return;

Så jeg åbnede den og den virker altså slet ikke i IE. Hvad der er endnu mere forvirrende er at han selv har skrevet linie-numrene ind manuelt.

men det er en spændende ide han har, og jeg kan måske lave et regExp der kører på \n og <br> og giver nogen point eller sammentæller linie-tallet.

fx sådan her:

string.split(/\n/i);

som giver mig et array med de steder hvor der er linieafstand. derefter kan jeg tage og udføre nogen Join() osv..

tak for input!

Du havde ret.

Jeg kunne ikke dele teksten i to, men jeg har lavet det sådan at den laver overflow:hidden, hvis den er over 120px i offsetHeight, hvilket svarer til 8 linier, med line-height på 15.