CSS Width problem
I'd like to create a div that has the same width as the text's length inside it. I can do it without problem when the div is inside a DOM element that has enough width to fit the text in. But when I put my text holder div inside another div that is not wide enough the text will be fractioned into lines even if I set the text holder div's max height and the container div's overflow to visible.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.o开发者_开发百科rg/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
body{
background: #c0c0c0;
}
#wrapper{
margin: auto;
width: 200px;
height: 300px;
border: 1px solid yellow;
overflow: visible;
}
.text{
display: inline;
min-width: 200px;
max-height: 19px;
line-height: 19px;
font-size: 19px;
background: red;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="text"> dugasu dauisghdu iasgudgu asgduig ausdgui gasuidg iasugdui asd</div>
</div>
<div class="text"> dugasu dauisghdu iasgudgu asgduig ausdgui gasuidg iasugdui asd</div>
</body>
</html>
Here's a picture of that: http://i36.tinypic.com/331ix53.png
I'd like the text inside the "wrapper" DOM element to be in ONE line like the text outside it (and of course to be overflowed)
You can do this by adding the CSS white-space property to your .text class:
.text{
white-space: nowrap;
/* other css declarations */
}
In action here.
加载中,请稍侯......
精彩评论