Text Wrap med CSS
Jeg har en email form der bruger CSS og jeg kan ikke får word wrap til at virke, ifølge de oplysninger jeg har fundet på nettet skal man brugeword-wrap: break-word;
men de bruger det sammen med en
div { word-wrap: break-word }
eller en inline css
<div STYLE="word-wrap: break-word">This is the text content of this div element</div>
mit html ser lidt andeledes ud, og jeg kan ikke hit hvor den skal placeres i min CSS/HTML før den virker
min HTML dokument ser sådan ud
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>Email til navn</title>
<script type="text/javascript" src="../scripts/header.js"></script>
<script type="text/javascript" src="../scripts/billede.js"></script>
<script language="Javascript1.2" src="../scripts/bar.js"></script>
<link rel=stylesheet href="../style/header.css" type="text/css">
<link rel=stylesheet href="../style/title.css" type="text/css">
<link rel=stylesheet href="../style/kontakt.css" type="text/css">
</head>
<body>
<?PHP
if($mailnavn&&$navn&&$email){
mail("mitnavn@minemail.dk","Følgende email er sendt via kontakt på Websiden".date("j/n/Y"),"Navn $navn \n \n email $email \n \n \n $mailnavn \n \n med venlig hilsen \n \n Web formular");
echo "<label for='t1'>Din email er sendt.\n \n Luk vinduet for at forsætte.</label>\n ";
?>
<?
}
else
{
?>
<p>
<font size="-2"><em>Alle felter skal udfyldes før emailen kan sendes</em></font>
<form method="post" action="../mailto/mailnavn.php">
<fieldset>
<label for="t5">Email indhold</label><input type="textarea" wrap="soft" COLS=10 ROWS=5 name="mailnavn" id="t9" /> <br />
<label for="t1">Dit navn:</label><input type="text" name="navn" id="t1" /><br />
<label for="t2">Din email/tlf.:</label><input type="text" name="email" id="t2" /><br />
<div><input type="submit" value="send" id="submit"></form></div>
</fieldset>
</p>
<?
}
?>
</body>
</html>
min CSS fil ser sådan ud jeg har forsøgt med word-wrap: break-word forskellige steder uden held
body{
background-color:#cccccc;
font-family:verdana;
font-size:12px;
word-wrap: break-word;
}
.text1{
position:absolute;
color:black;
background-color:#999999;
left:6px;
right:150px;
top:140px;
z-index:3;
text-align:left;
padding:10px;
border:5px ridge black;
height:auto;
width:303px;
word-wrap: break-word;
}
.text2{
position:absolute;
color:black;
background-color:#999999;
left:6px;
right:auto;
top:auto;
z-index:3;
text-align:left;
padding:10px;
border:5px ridge black;
height:auto;
width:auto;
word-wrap: break-word;
}
div
{
margin-top:15px;
}
#t1, #t2, #t3, #t4, #t5, #6, #7, #8
{
border:1px inset rgb(153,204,255);
word-wrap:break-word;
width: 300px;
background:rgb(148,204,252);
}
#t9
{
word-wrap: break-word;
border:1px inset rgb(153,204,255);
width: 300px;
height:150px;
background:rgb(148,204,252);
}
.bottom{position:absolute;
color:black;
background-color:#cccccc;
top:700px;
z-index:7;
text-align:left;
padding:10px;
border:0;
left:0px;
}
A:HOVER{
text-decoration:none;
color:green;
font-size:12px;
}
A:ACTIVE{
text-decoration:none;
color:green;
font-weight: bold;
cursor:default;
font-size:12px;
}
}
A:VISITED{
text-decoration:none;
color:black;
font-weight: bold;
cursor:default;
font-size:12px;
}
P{
font-family:Verdana;
font-size:12px;
}
