Søg
Avatar billede myplacedk Nybegynder
23. oktober 2001 - 16:05 Der er 6 kommentarer og
1 løsning

linjeskift og bredde på div

Sidder lige med et lidt sjovt problem... :)

Jeg har en div, med en anderledes baggrundsfarve end body. Man kan altå
tydeligt se bredden på div\'en.
Den skal have præcis samme bredde, som indholdet, og indholdet må ikke
have flere linjeskift, end dem jeg selv indsætter.

Altså:
<div style=\"background-color: yellow;\">
a abc a abc a abc a abc a abc a abc a abc a abc a abc a abc
</div>
Selv om browseren er smallere end denne linjes bredde, så skal div\'en
stadig være bred nok, til at linje kan stå der uden at blive delt.
Er browseren bredere en linjens længde, så skal div\'en ikke gå helt ud
til højre margin.

Nogen forslag?

(Har også spurgt på usenet)
Avatar billede jumper Nybegynder
23. oktober 2001 - 16:07 #1
Sæt overflow til hidden ?

<div style=\"background-color: yellow;overflow:hidden\">
a abc a abc a abc a abc a abc a abc a abc a abc a abc a abc
</div>

/Thor
Avatar billede myplacedk Nybegynder
23. oktober 2001 - 16:12 #2
Det giver ingen forskel, før jeg har sat en bredde på.

Hvis jeg så sætter bredden til 100%, så er div\'ens bredde lige som før.
Er linjen bredere end der er plads til, så bliver den bare brudt.
Forskellen ses først, når diven er smallere end det længste ord. Men det er sådan set ligegyldigt, for så smal skal den aldrig blive. Den skal aldrig blive smallere, end den længste linje.

Avatar billede olebole Juniormester
23. oktober 2001 - 16:25 #3
<ole>

<html>
<head>
<script language=\"JavaScript\">
var str = \"a abc a abc a abc a abc a abc a abc a abc a abc a abc a abc\";

function checkNfill() {
    document.getElementById(\"tester\").innerHTML = str;
    document.getElementById(\"ib\").style.width = document.getElementById(\"tester\").offsetWidth;
    document.getElementById(\"ib\").innerHTML = str;
}
window.onload = checkNfill;
</script>
</head>
<body>

<span id=\"tester\" style=\"position:absolute;visibility:hidden;\"></span>
<div id=\"ib\" style=\"background-color:yellow;\"></div>

</body>
</html>

/mvh
</bole>
Avatar billede olebole Juniormester
23. oktober 2001 - 16:29 #4
...eller:

<html>
<head>
<script language=\"JavaScript\">
function checkNfill() {
    document.getElementById(\"tester\").innerHTML = document.getElementById(\"ib\").innerHTML;
    document.getElementById(\"ib\").style.width = document.getElementById(\"tester\").offsetWidth;
    document.getElementById(\"ib\").style.visibility = \"visible\";
}
window.onload = checkNfill;
</script>
</head>
<body>

<span id=\"tester\" style=\"position:absolute;visibility:hidden;\"></span>
<div id=\"ib\" style=\"background-color:yellow;visibility:hidden;\">a abc a abc a abc a abc a abc a abc a abc a abc a abc a abc</div>

</body>
</html>

/mvh
Avatar billede myplacedk Nybegynder
23. oktober 2001 - 17:02 #5
Hmm... Ville gerne lave det i CSS...
Jeg venter lige og se, om der kommer bedre forslag. Men du inspirerede mig da til noget, der virker. :)

Se evt resultatet: http://myplace.dk/
Avatar billede sukos Juniormester
23. oktober 2001 - 17:44 #6
Hvis du angiver dine tegn i pixels, kender du str. på linjen. Og kan sætte bredden på din div så den passer.

Hvis du laver en tabel, kan du bruge nowrap, til at hindre linjeskift:

<div style=\"background-color: yellow;\">
<table><tr>
<td nowrap>a abc a abc a abc a abc a abc a abc a abc a abc a abc a abc</td>
</tr></table>
</div>

Ved ikke om man kan bruge nowrap på en div?
Avatar billede myplacedk Nybegynder
23. oktober 2001 - 19:09 #7
sukos>> Jeg vil af princip ikke forvente at tekst har en bestemt størrelse. :)

Men nowrap findes faktisk i en css-version:
white-space: nowrap;
Og det kører! :)
Du får pointene...
Avatar billede 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.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 13:35 Bruger på Win11 Af lurup i Browsere
07/1022:52 Google beskeder har/havde en bug, så den sendte tilfældige gamle beskeder gemt indeni nye beskeder efter skifte til ny Samsungtelefon via Samsung Smart Switch Af KennethLykke i Apps til Android
05/1010:31 Min IPAD vil ikke oplade. Af Nørdnot i Mac
04/1018:04 Findes der et "Papir-kurv" symbol, man kan sætte på Firefox og Google Chrome ? (For oven) Af Ikke-ekspert i Browsere
03/1012:14 Ang udskrift Canon mb5050 Af made18 i Printere
White papers
Flere white papers »