CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

zaittam Nybegynder

17. juni 2006 - 13:41 Der er 8 kommentarer og
1 løsning

Find teksts længde i pixels

Hej eksperter!

Følgende spørgsmål er placeret i en JavaScript-kategorien, selvom jeg ikke ved, om dette sprog kan løse mit problem. Det er i virkeligheden ligemeget hvordan problemet bliver løst - næsten da. ASP er feks. ikke særlig velkomment :)

Jeg har en side, som jeg koder i PHP. I menuen har jeg en liste over de seneste nyheder på siden, der vises med overskrifter. Ind imellem kommer der nogle overskrifter, der er så lange, at de fylder 2 linier. Det synes jeg ikke er kønt. Jeg kender til PHP koden, der tæller tegnene, men med Verdana som skrifttype fylder 15 @'er ligeså meget som 25 små L'er - omtrent.

Derfor: Er der en måde, som kan måle en teksts længde i pixels?

Synes godt om

mclemens Nybegynder

17. juni 2006 - 20:58 #1

Godt nok?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
#menuen{width:200px;background:#aaa;}
#menuen h1{background:#888;margin:10px 0px;}
</style>

<script type="text/javascript">
window.onload=function(){
var helms=document.getElementById("menuen").getElementsByTagName("h1");
for(i=1;i<helms.length;i++){

tmp=helms[i].childNodes[0].nodeValue;tmpl=tmp.length;

while(helms[i].offsetHeight>helms[0].offsetHeight){
helms[i].childNodes[0].nodeValue=tmp.substr(0,(--tmpl-3))+"...";
}

}
}
</script>

</head><body>

<div id="menuen">

<h1>Oveskrift 1</h1>
<h1>Oveskrift 2</h1>
<h1>Det kan kun gå galt det her ... men vi prøver da lige alligevel at fuske lidt :o)</h1>
<h1>Det er jo trods alt browserens resourcer vi stresser :P - Bemærk højden fastsættes af menu punkt nr. 1 :o)</h1>
<h1>Oveskrift 5</h1>

</div>

</body></html>

Synes godt om

mclemens Nybegynder

17. juni 2006 - 21:36 #2

[ Derfor: Er der en måde, som kan måle en teksts længde i pixels? ]
^ - Det kan sagtens gøres ved at kryds scripte text indholdet over i en usynlig div med en indre span, som man så måler offsetWidth på, indtil den når ned til den fastsatte width og så overfører man teksten til det oprindelige element, så tekst længden er blevet forkortet.

Det er dog meget mere resourcekrævende end ovenstående måling på elementets aktuelle højde ved onload. Det kan godt være den skal tweakes lidt, så den matcher bedre - evt. blot sletter tegnene som nendenstående eller anderledes, jeg er ikke helt sikker på, hvad facit skal være, så undskyld hvis jeg skyder i blinde...

Denne:
helms[i].childNodes[0].nodeValue=tmp.substr(0,(--tmpl-3))+"...";
evt. skiftes til denne:
helms[i].childNodes[0].nodeValue=tmp.substr(0,(--tmpl));

Så sletter den de "..." den tilføjer straks den sletter nogle tegn :o)

Synes godt om

zaittam Nybegynder

19. juni 2006 - 00:57 #3

Her har jeg forsøgt at implementere det i min PHP-kode:

<style type="text/css">
#menuen{width:150px;background:#ffffff;}
#menuen h1{font-size:11px; line-height: 11px}
</style>

<script type="text/javascript">
window.onload=function(){
var helms=document.getElementById("menuen").getElementsByTagName("h1");
for(i=1;i<helms.length;i++){

tmp=helms[i].childNodes[0].nodeValue;tmpl=tmp.length;

while(helms[i].offsetHeight>helms[0].offsetHeight){
helms[i].childNodes[0].nodeValue=tmp.substr(0,(--tmpl-3))+"...";
}

}
}
</script>

<center><img src="<?=$fuldurl?>img/boks_senestenyt.gif"></center>
<div id="menuen">
<?
$query = mysql_query("SELECT * FROM news WHERE slettet='0' ORDER BY id DESC LIMIT 5");
while($row = mysql_fetch_assoc($query)) {
echo'<h1>   <a href="'.$fuldurl.'nyheder/index.php?id='.$row[id].'">'.$row['overskrift'].'</a></h1>';
}
?>
</div>

Men det vil ikke rigtig virke :/ Koder jeg ikke valid eller? :)

Synes godt om

mclemens Nybegynder

19. juni 2006 - 08:25 #4

Det er fint nok, den er bare inde i et a'href så
den skal lige rettes til ... prøv denne her:

<script type="text/javascript">
window.onload=function(){
var helms=document.getElementById("menuen").getElementsByTagName("h1");

for(i=1;i<helms.length;i++){

tmp=helms[i].getElementsByTagName("a")[0].childNodes[0].nodeValue;tmpl=tmp.length;

while(helms[i].offsetHeight>helms[0].offsetHeight){
helms[i].getElementsByTagName("a")[0].childNodes[0].nodeValue=tmp.substr(0,(--tmpl-3))+"...";
}
}
}
</script>

Synes godt om

pvtsommer Nybegynder

20. juni 2006 - 11:45 #5

Du siger selv PHP:

Hvad med:

http://dk.php.net/imagettfbbox

<?PHP
$ttfSize = 10;
$ttfAngel = 0;
$ttfFont = "verdana.ttf"; // Uden / foran verdana.ttf skulle den gerne kigge i serverens font bibliotek
$ttfText = "Hej Jeg hedder pvtsommer herinde. Mon det her kan løse problemet?";
$sizeoftxt = imagettfbbox ( $ttfSize, $ttfAngel, $ttfFont, "$ttfText" );
?>

Så vil:
$sizeoftxt[2] være bredden på bogstaverne i pixels, og du kan dermed korte dem alle sammen ned med en simpel if() :)

Synes godt om

pvtsommer Nybegynder

20. juni 2006 - 11:47 #6

Må jeg anbefale at du i øvrigt ikke søger efter wildcards i dine queries...

Når du laver SELECT * FROM hiver den ALT ud... du bruger højest sandsynligt ikke det hele, og hvis du gør er det alligevel betydeligt hurtigere blot at benytte id, header, text eller hvad de nu engang hedder.

Samtidig gør det også din kode mere overskuelig når du om 1½ år finder på at revidere den :)

Synes godt om

pvtsommer Nybegynder

20. juni 2006 - 11:50 #7

Som side note til mit forslag:

Det den faktisk gør er at tage den "kasse" som er uden om det tekstafsnit du smider igennem.

Er din tekst:

"Hej med dig" skal du forestille dig at den står som [Hej med dig] og at du dermed har dannet et rektangel, som den tager pixelsmålene på.

Synes godt om

mclemens Nybegynder

28. juni 2006 - 09:39 #8

Kaster lige et svar, hvis du kunne bruge det?

Synes godt om

mclemens Nybegynder

24. juli 2006 - 22:55 #9

Takker for point :)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS

22/11

Test: Den snusfornuftige Volkswagen ID.3 blevet til lidt af el-bisse

22/11

Vil købe tele-løsninger til det offentlige for 370 millioner kroner

22/11

Nørgaard: Det er de neuro-divergente originalers tid

22/11

Sker helt åbenlyst: Ansatte i den kinesiske stat sælger borgernes personlige data på hemmelige internet-fora

22/11

Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"

22/11

Derfor bliver den amerikanske tvangs-opdeling af Google nok ikke til noget

22/11

Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen

22/11

Vi har fundet 10 ledige it-stillinger, som du kan søge netop nu

22/11

Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet

22/11

Kombit gør klar til at købe it-konsulenter for 140 millioner kroner - her er planen

22/11

Droner i krig - sådan anvendes de mest effektivt på slagmarken

Vis flere artikler

IT-JOB

BUPL

Er du vores nye teamleder i drift og support?

Quadsat ApS

Robotics Engineer

Statens IT

Leder til drift og udvikling af Microsoft 365

Netcompany A/S

Microsoft Operations Engineer

Simteq A/S

Frontend-udvikler med sans for UI design

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I går 22:30	Underlig meddelelse på skærmen Af Jordegern i E-mail programmer
I går 15:56	Navigation i Peugeot 3-2008 fra 2017 Af arnepedersen i Andet software
I går 14:10	Outlook henter ikke mails Af TTA i Office & Kontorpakker
I går 13:58	vise billeder i kartotek med store ikoner inklusive optagelsesdato Af Malm i Billedbehandling
I går 13:35	Adobe Elements 2019, Organizer Crasher Af mort1 i Billedbehandling