Lage en tekstboks som kutter teksten automatisk på enden.

ovzer · 12. desember 2008

Hei, jeg har laget en div som heter "innhold".

I div'en skriver jeg masse tekst, men teksten kuttes ikke automatisk etter bredden på boksen.

I css'en skrev jeg width:500px; men teksten kuttes fremdeles ikke av.

Noen som vet hvorfor?

Endret 12. desember 2008 av ovzern

ThomasQ · 12. desember 2008

add

overflow: auto;

eller

overflow: scroll;

Endret 12. desember 2008 av ThomasQ

ovzer · 12. desember 2008

Nå laget den bare en scroll bar under. :/

Jeg vil at den skal kutte teksten, slik som når du trykker "enter".

laurell · 12. desember 2008

Ikke den beste løsningen, men legg inn <br /> der du vil at teksten skal bryte og forsette på neste linje.

Funker dette?

text-overflow: ellipsis;

ovzer · 12. desember 2008

Det funka ikke, nei.

Jeg har ingen anelse om hvor problemet ligger.

laurell · 12. desember 2008

Ikke lett og hjelpe deg uten vi har noen koder og gå etter, vis oss ha du har i CSS.

Googlet litt og kom fram til noe som kanskje vil funke:

white-space: pre-wrap; /* css-3 */

word-wrap: break-word; /* IE 5.5+ */

white-space: -moz-pre-wrap; /* Mozilla */

white-space: -pre-wrap; /* Opera */

white-space: -o-pre-wrap; /* Opera 7 */

ovzer · 12. desember 2008

HTML:

	<body>
<div id="menyTR">
</div>

<div id="top">
	<img src="images/top.png" />
</div>
<div id="content">

<div id="header">
<a href='index.php'><img src='images/SUNO1.png' alt='SUNO Studio' style="border:none"/></a>
</div>
<div id="meny">
	<a href='menyfyll.php'>Menyfyll!</a>
</div>
<div id="innhold">
	<p>Heyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyya</p>
</div>
<div id="bunntekst">
© Ove Baardsgaard 2008
</div>

</div>
</body>

CSS:

body {
background:url(images/Textur.png) repeat;
font-family:Helvetica;
text-align:center; 
}

#content {
background:url(images/conttex.png) top center repeat-y;
width:555px;
margin:0 auto;
margin-top:0px;
position:relative;
z-index:1;
}

#innhold {
text-align:left;
padding:0 0 0 50px;
width:500px;
}

#meny {
background:url(images/meny.png) repeat-x;
height:49px;
margin:0 19px 0 34px;
text-align:left;
font:16pt Verdana, Arial, Helvetica, sans-serif;
z-index:2;
}

#meny a:hover {
background:url(images/menyHOV.png) repeat-x;
height:49px;
}

#meny a:link,
#meny a:visited {
margin-bottom:10px;
color:#000000;
text-decoration:none;
height:49px;
}

#menyTR {
background:url(images/menyTR.png) repeat-x;
height:49px;
z-index:0;
position:relative;
top:170px;
margin:-8px;
}

#header {
margin-left:15px;
}

#top {
width:555px;
margin:0 auto;
margin-top:-50px;
position:relative;
padding-left:20px;
text-align:center; 
}

#bunntekst {
bottom:0px;
color:#999999;
padding:10px 0 10px 0;
font:9pt Arial, Helvetica, sans-serif;
}

Ser sånn ut:

Skal se sånn ut:

Endret 12. desember 2008 av ovzern

laurell · 12. desember 2008

Merklig, ser bra ut med meg i Firefox, IE og Opera.

Jooakim · 13. desember 2008

#innhold p {
display: block;
width: 400px;
}

ovzer · 13. desember 2008

Funka ikke det heller :/

Logg inn

Lage en tekstboks som kutter teksten automatisk på enden.

Anbefalte innlegg

ovzer

Lenke til kommentar

Videoannonse

ThomasQ

Lenke til kommentar

ovzer

Lenke til kommentar

laurell

Lenke til kommentar

ovzer

Lenke til kommentar

laurell

Lenke til kommentar

ovzer

Lenke til kommentar

laurell

Lenke til kommentar

Jooakim

Lenke til kommentar

ovzer

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer