Question

我想创建一个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元素中的文本与其外部的文本一样在一行中（当然要溢出）

Answer 1

您可以通过将CSS white-space property添加到.text类来完成此操作：

.text{
     white-space: nowrap;
     /* other css declarations */
}

In action here

CSS宽度问题

1 个答案: