我想创建一个宽度与其内部文本长度相同的 div。 当 div 位于宽度足以容纳文本的 DOM 元素内时，我可以毫无问题地做到这一点。 但是，当我将我的文本容器 div 放入另一个不够宽的 div 中时，即使我将文本容器 div 的最大高度和容器 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=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>
这是一张图片: http://i36.tinypic.com/331ix53.png
我希望“wrapper”DOM 元素内的文本与其外部的文本一样在一行中(当然要溢出)
最佳答案
您可以通过添加 CSS white-space property 来做到这一点到你的 .text 类:
.text{
white-space: nowrap;
/* other css declarations */
}
关于CSS宽度问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3483320/