Avatar billede tuk Nybegynder
29. juni 2005 - 00:41 Der er 12 kommentarer og
2 løsninger

Overflow i <div> medfører resten af teksten i ny <div>

Her er en lille kuriøs ting:

Jeg har to lige store <div>'s ved siden af hinanden. Den ene indeholder nogle afsnits tekst (lad os kalde den <div>#1), den anden et billede (<div>#2).

Teksten trækkes fra en database, og nogen gange kan der godt forekomme mere tekst i <div>#1, end layoutet tillader.

Jeg kunne godt tænke mig noget i stil med det, man kender fra DTP-programmer: Hvis der er mere tekst i <div>#1, end der er plads til, fortsætter teksten i <div>#2 (og erstatter dermed billedet).

Jeg skal være ærlig og sige, at det ikke er noget konkret, jeg sidder og koder. Derfor er jeg heller ikke specielt interesseret i egentlig kode. Det er mere et spørgsmål om metode.

- Hvordan skulle man gribe sådan noget an?
- Hvad skal jeg have fat i for at se, om der er overflow i en <div>?

Og for at dele teksten op, forestiller jeg mig umiddelbart, at jeg skulle lave en eller anden decision i stil med:

Så længe der er overflow i <div>#1{
Klip det sidste bogstav i indholdet og put det forrest i en ny variabel (til <div>#2)
}
Tag hele det sidste ord fra <div>#2 og put det forrest i variablen (til <div>#2)  //for at sikre, at den ikke klipper midt i et ord.

Det er ikke relevant at sikre, at der kommer overflow på <div>#2. Der er i alt aldrig mere end dobbelt så meget tekst, som der er plads til i <div>#1. (Don't ask ... sår'n er'ed bare ;-)

Forslag til metode søges ... :-)
Avatar billede roenving Novice
29. juni 2005 - 00:52 #1
Alene, at du ikke kan være sikker på at forskellige browsere og/eller konfigurationer giver samme resultat umuliggør dit projekt ...

-- og brugerne har jo også mulighed for at override dine grundindstillinger, så det er det umulige projekt medmindre du renderer det server-side og sender det som billede ...

-- selv til windows-form-applikationer er gui noget irriterende noget at arbejde med, og der er både i teorien og i praksis umuligt at arbejde med i browserrettet programmering !-)
Avatar billede tuk Nybegynder
29. juni 2005 - 01:17 #2
roenving> Hmm ... godt synspunkt ... I see your point :-)

Andre?
Avatar billede olebole Juniormester
29. juni 2005 - 17:01 #3
<ole>

Ja, hvis du føler dig mere sikker på det umulige i dit projekt ved en gentagelse af en rigtig god besvarelse, skal jeg da gerne bidrage:

Alene, at du ikke kan være sikker på at forskellige browsere og/eller konfigurationer giver samme resultat umuliggør dit projekt ...

-- og brugerne har jo også mulighed for at override dine grundindstillinger, så det er det umulige projekt medmindre du renderer det server-side og sender det som billede ...

-- selv til windows-form-applikationer er gui noget irriterende noget at arbejde med, og der er både i teorien og i praksis umuligt at arbejde med i browserrettet programmering !-)

Tekstomløb er ikke en option i HTML eller andre web-teknologier, så den eneste fornuftige løsning er, at du indretter dit layout derefter  :)

/mvh
</bole>
Avatar billede tuk Nybegynder
29. juni 2005 - 20:38 #4
Hmm ... når to så tunge eksperter enes om et fuldstændigt enslydende svar, må jeg nok tage det til mig *suk* ;)

Thanks guys ... smid lige et svar begge to ... så gi'r jeg nogen points =)
Avatar billede roenving Novice
29. juni 2005 - 23:06 #5
Oki '-)
Avatar billede per1291 Nybegynder
30. juni 2005 - 22:43 #6
Men hvis der nu ikke havde været et billede indblandet.

<!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>Tekstombrydning</title>
<style type="text/css">
#spalte1 {
    position: absolute;
    margin: 0px;
    padding: 0px;
    left: 0px;
    top: 0px;
    width: 200px;
    height: 195px;
    overflow: hidden;
    background-color: yellow;
}
#spalte2 {
    position: absolute;
    margin: 0px;
    padding: 0px;
    left: 210px;
    top: -193px;
    width: 200px;
    height: 388px;
    background-color: yellow;
}
#knap {
    position: absolute;
    left: 210px;
    top: 210px;
}
body {
    font-size: 20pt;
    font-family:verdana,helvetica,sans-serif;
}
</style>
<script type="text/JavaScript">
function vistekst()
{
var tekst="Dette er en demonstration af, hvordan man kan vise tekst i 2 spalter på en hjemmeside."
window.document.getElementById("spalte1").innerHTML=tekst
window.document.getElementById("spalte2").innerHTML=tekst
}
</script>
</head>
<body>
<div id="spalte1">&nbsp;</div>
<div id="spalte2">&nbsp;</div>
<div id="knap"><button onclick="vistekst()">udfyld</button></div>
</body>
</html>

Hilsen  Per
Avatar billede tuk Nybegynder
01. juli 2005 - 09:32 #7
per> Jatak ... det er jeg helt med på =)
olebole> Lægger du lige et svar også?

Men tilbage - efter at jeg har opgivet projektet i sin spæde start - står spørgsmålet:
"Findes der nogen måde hvorpå man via Javascipt kan aflæse om en given <div> overflow'er?"
Avatar billede per1291 Nybegynder
01. juli 2005 - 11:57 #8
Man kan aflæse det indirekte, nemlig ved at måle højden på en usynlig div.

<!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>Tekstombrydning</title>
<style type="text/css">
#usynlig {
    position: absolute;
    margin: 0px;
    padding: 0px;
    left: 0px;
    top: 0px;
    width: 200px;
    visibility: hidden;
}
#spalte1 {
    position: absolute;
    margin: 0px;
    padding: 0px;
    left: 0px;
    top: 0px;
    width: 200px;
    height: 195px;
    overflow: hidden;
    background-color: yellow;
}
#spalte2 {
    position: absolute;
    margin: 0px;
    padding: 0px;
    left: 210px;
    top: -193px;
    width: 200px;
    height: 388px;
    background-color: yellow;
}
#knap {
    position: absolute;
    left: 210px;
    top: 210px;
}
body {
    font-size: 20pt;
    font-family:verdana,helvetica,sans-serif;
}
</style>
<script type="text/JavaScript">
function vistekst()
{
var tekst="Dette er en demonstration af, hvordan man kan vise tekst i 2 spalter på en hjemmeside."
var d=window.document.getElementById("usynlig")
d.innerHTML=tekst
alert("Div højde = "+parseInt(d.offsetHeight)+"px")
window.document.getElementById("spalte1").innerHTML=tekst
window.document.getElementById("spalte2").innerHTML=tekst
}
</script>
</head>
<body>
<div id="usynlig">&nbsp;</div>
<div id="spalte1">&nbsp;</div>
<div id="spalte2">&nbsp;</div>
<div id="knap"><button onclick="vistekst()">udfyld</button></div>
</body>
</html>
Avatar billede tuk Nybegynder
01. juli 2005 - 13:18 #9
per> Hmmm ... okay =) ... jeg det blev jeg da lidt klogere af :D ... du får 30 af mine udlovede points, hvis du lægger et svar.
Avatar billede per1291 Nybegynder
01. juli 2005 - 16:34 #10
Fint. Du kan faktisk løse din oprindelige opgave nu. Måske er det synd at lade browseren lave det samme stykke arbejde 3 gange. Nå, pyt med computerens følelser ...
Avatar billede tuk Nybegynder
01. juli 2005 - 17:44 #11
olebole> Hvis du vil have point for at lægge din autoritet bag roenvigs svar, så post venligst et svar inden midnat ... ;-)
Avatar billede roenving Novice
02. juli 2005 - 00:18 #12
-- og bortset fra problematikken om at loade data flere gange, er der jo faktisk et strejf af genialitet i ideen med at vise ting forskudt ...
Avatar billede roenving Novice
02. juli 2005 - 00:45 #13
Tak for point ;~}
Avatar billede per1291 Nybegynder
02. juli 2005 - 01:37 #14
Og tusind tak for 50 point!
(Også tak til Ole: Du havde åbenbart ikke lyst til point.)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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