---
title: "Räkna ut textbredd"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/167224-räkna-ut-textbredd"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "oGGo"
published: "2007-12-13T09:55:24.000Z"
updated: "2007-12-13T21:18:46.000Z"
replies: 4
views: 667
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/167224-räkna-ut-textbredd"
---

# Räkna ut textbredd

## #1 — oGGo, 2007-12-13T09:55Z

Hej!

Jag vill räkna ut bredden i antal pixlar på en viss text. Har försökt med alla tänkbara medel men finner ingen lösning, någon ssom vet hur man gör detta med hjälp av javascript?

Tack på förhand & trevlig Lucia.

/oGGo

Permalänk: https://www.webforum.nu/p/167224

## #2 — Troxy, 2007-12-13T10:26Z

Det finns ett trick att göra detta, nämligen att man stoppar in texten i ett div-element.
Sen kan man läsa av *clientWidth* respektive *clientHeight* på div-elementet för att få höjden och bredden i pixlar.
(Vet ej dock hur stödet är bland olika webbläsare).
Jag slängde ihop en snabb funktion som jag bara har testat i Firefox:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Höjd och bredd på text</title>
	<script type="text/javascript">

	function getTextSize(text, size) {
		// Skapa en ny div
		var div = document.createElement('div');
		// Stoppa in texten
		div.innerHTML = text;
		// Ställ in textstorleken
		div.style.fontSize = size;
		// Sätt absolut positionering för att bredden ska stämma
		div.style.position = 'absolute';
		// Lägg till diven i body
		document.body.appendChild(div);
		// Läs av måtten
		var result = { 'width': div.clientWidth, 'height': div.clientHeight };
		// Ta bort diven
		document.body.removeChild(div);
		// Returnera resultatet
		return result;
	}

	window.onload = function() {
		var foo = getTextSize('Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', '12px');
		alert('Textens bredd: ' + foo.width);
		alert('Textens höjd: ' + foo.height);
	}

	</script>
</head>
<body>
</body>
</html>
```

Hoppas den kommer till användning!  :bire

Permalänk: https://www.webforum.nu/p/2060812

## #3 — Danne V, 2007-12-13T10:54Z

På "den gamla goda tiden" när man satte text med bly och sedermera med fotosättare fanns det något som hette "tc-tal" som angav medelvärdet på ett typsnitts teckenbredd och kunde med hjälp av det samt radavstånd räkna ut ganska exakt hur bred/hög en textmassa skulle bli. Är det nåt sånt du menar?

Permalänk: https://www.webforum.nu/p/2060817

## #4 — oGGo, 2007-12-13T10:57Z

> **Troxy skrev:**
>
> Det finns ett trick att göra detta, nämligen att man stoppar in texten i ett div-element.
> Sen kan man läsa av *clientWidth* respektive *clientHeight* på div-elementet för att få höjden och bredden i pixlar.
> (Vet ej dock hur stödet är bland olika webbläsare).
> Jag slängde ihop en snabb funktion som jag bara har testat i Firefox:
>
>
> ```
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> 	"http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> 	<title>Höjd och bredd på text</title>
> 	<script type="text/javascript">
> 
> 	function getTextSize(text, size) {
> 		// Skapa en ny div
> 		var div = document.createElement('div');
> 		// Stoppa in texten
> 		div.innerHTML = text;
> 		// Ställ in textstorleken
> 		div.style.fontSize = size;
> 		// Sätt absolut positionering för att bredden ska stämma
> 		div.style.position = 'absolute';
> 		// Lägg till diven i body
> 		document.body.appendChild(div);
> 		// Läs av måtten
> 		var result = { 'width': div.clientWidth, 'height': div.clientHeight };
> 		// Ta bort diven
> 		document.body.removeChild(div);
> 		// Returnera resultatet
> 		return result;
> 	}
> 
> 	window.onload = function() {
> 		var foo = getTextSize('Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', '12px');
> 		alert('Textens bredd: ' + foo.width);
> 		alert('Textens höjd: ' + foo.height);
> 	}
> 
> 	</script>
> </head>
> <body>
> </body>
> </html>
> ```
>
> 
> Hoppas den kommer till användning!  :bire

Tackar, funkar verkligen klockrent.
All cred till dig, Troxy! =)

Tack tack tack!!!

Permalänk: https://www.webforum.nu/p/2060819

## #5 — Troxy, 2007-12-13T21:18Z

Varsågod! Jag blev lite överraskad själv när jag såg att det även fungerar i såväl IE som Safari. :)

Permalänk: https://www.webforum.nu/p/2060984

---

Tråden på webben: https://www.webforum.nu/amne/javascript/167224-räkna-ut-textbredd
