[html] tekst in div

[Cuball]

Ik had graag geweten hoe ik mijn tekst die ik in een DIV toon op dezelfde manier kan laten wrappen alsof ik die in een text area geplakt heb.

Als ik copy/paste uit een mail doe, waar verschillende lijnen in staan, dan komt de tekst er met de line breaks mooi in en en wrapt ie ze naar de volgende lijn als de tekstarea niet breed genoeg is.

Maar als ik deze gegevens dan terug ophaal van de databank en toon ze in een div dan krijg ik problemen, nu heb ik ze in een <div><pre> staan, met scrollbars aan. Dit is wel niet zo gebruiksvriendelijk (veel scrollen, links rechts naar boven en beneden)

ik zou willen dat ik enkel scrollbars om naar boven en beneden heb, maar da te tekst mooi binnen men div past, als het te lang is dat er een nieuwe lijn gebruikt wordt

[André]

code:

<div style="width:100px">
  Hier je tekst.
</div>

[RM-rf]

die DIV heeft dan een overflow: auto naar ik aanneem?

explorer ondersteund het proprietaire overflow-x: hidden; overflow-y: auto; welk enkel scrollbars aan de verticale kant toont en de onderkant per definitie leeg laat, echter dat zijn proprietaire MS-css.rules, die opera, mozilla en KHTML niet ondersteunen.

[ Voor 6% gewijzigd door RM-rf op 23-12-2004 11:46 ]

[Cuball]

André schreef op donderdag 23 december 2004 @ 11:34:

code:

<div style="width:100px">
  Hier je tekst.
</div>

als je het zo doet, dan krijg je de originele line breaks niet mee, (toch niet als ze uit een outlook email bericht geplakt werden)

RM-rf schreef op donderdag 23 december 2004 @ 11:45:
die DIV heeft dan een overflow: auto naar ik aanneem?

explorer ondersteund het proprietaire overflow-x: hidden; overflow-y: auto; welk enkel scrollbars aan de verticale kant toont en de onderkant per definitie leeg laat, echter dat zijn proprietaire MS-css.rules, die opera, mozilla en KHTML niet ondersteunen.

applicatie hoeft enkel te werken op internet explorer, dus geen probleem. Maar met de methode overflow-x: hidden krijg je gewoon de content niet te zien, je kan dan wel door te selecteren in de div naar het verborgen deel gaan, maar er worden geen auto breaks toegevoegd

[ Voor 61% gewijzigd door Cuball op 23-12-2004 11:51 ]

[T-MOB]

Je kunt ook gewoon een div gebruiken en dan met PHP of javascript de line-breaks vervangen door een <br />. Die geef je een overflow-y: auto en je bent klarr denk ik zo...

[edit]

Hier een JS functie die dat bijna helemaal doet. Hij werkt niet helemaal in IE omdat IE "\n" niet herkent als linebreak. Ik kon zo gauw geen oplossing vinden en ben ook maar een JS amateur

JavaScript:

function breakreplace(divid)
{
  //get input text
  var div = document.getElementById(divid);
  var text = div.firstChild.nodeValue;
  var br; var txt;
  
  var lastindex = 0;
  var index = text.indexOf("\n");

  if (index != -1) { div.removeChild(div.firstChild); }

  //loop trough breaks
  while (index != -1) 
  {
    //insert nodes
    txt = document.createTextNode(text.substr(lastindex, index) );
    br = document.createElement('br');

    div.appendChild(txt);
    div.appendChild(br);

    //set index and lastindex for next loop
    lastindex = index;
    index = text.indexOf("\n", index + 1); 
  }
}

[ Voor 76% gewijzigd door T-MOB op 23-12-2004 13:14 ]