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

23/12

Historisk million-bøde får Region Syddanmarks it-direktør til at efterlyse nye GDPR-retningslinjer

23/12

Til næste år kommer iPhone 17 – og ifølge rygtestrømmene vil den byde på tre nyheder

23/12

En af verdens største it-distributører dropper samarbejdet med Broadcom: Kunne ikke nå til enighed

23/12

Ser med 'stor alvor' på problemer med vand, varme og manglende kontrol i politiets datacenter

23/12

Brugere rammes af Microsoft-fejl: M365-produkter er på mystisk vis blevet deaktiveret

23/12

Her er dommen: Region Syddanmark skal betale historisk stor bøde for grove overtrædelser af GDPR

23/12

Vores vidensindsamling og demokratiske samtale påvirkes af helt lukkede beslutninger i en enkelt privat virksomhed

23/12

Overblik: Danske it-selskaber strømmer ind mod den centrale storby - og det handler ikke om penge

23/12

Banebrydende ChatGPT-opdatering er lige på trapperne: “Denne model vil være helt fantastisk til programmering”

23/12

Tivoli søger ny CIO: Kenneth Hartvig stopper efter tre år på posten

23/12

Vi ender med at bo i en taber-region, hvis ikke vi gør noget drastisk - her er digitaliseringsministerens plan

Vis flere artikler

IT-JOB

Banedanmark

It-koordinator til SAP-projekter

DSV

Business Relationship Manager

DSV

Data Mapping Analyst - Transform raw data to tangible output for new Data Platform

DSV

Senior Change Manager

Udviklings- og Forenklingsstyrelsen

Underdirektør med ansvar for it-drift af et stort it-program

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I går 19:53	CD Burner XP (Sætte den til at optage nogle numre fra en CD - Men ikke alle ? Af Ikke-ekspert i Musik & videoafspillere
I går 17:42	Katastrofe med Pc Af LilBe i PC
I går 09:44	Mine emails kan pluselig ikke læses af modtagerne, kun uforståelige tal og bogstaver Af gunnarb i E-mail programmer
24/1216:03	Fjern "Seneste" - "Hurtig adgang" Fra Windows 11 - Hvordan ? Af Ikke-ekspert i Windows
23/1214:43	html <Input.. Danske bogstaver Af pjotre i Andet software