代码之家  ›  专栏  ›  技术社区  ›  Mithun Sreedharan Kuldeep Modi

CSS无文本换行

  •  50
  • Mithun Sreedharan Kuldeep Modi  · 技术社区  · 16 年前

    http://jsbin.com/eveqe3/edit

    我需要在item div中显示文本,这样文本只显示在具有指定宽度的绿色框中,行的其余部分需要隐藏。有什么建议请。。。

    <style>
      #container{
        width : 220px;
      }
      .item{
        float:left;
        border: 1px solid #0a0;
        width: 100px;
        height: 12px;
        padding 2px;
        margin: 0px 2px;
      }
      .clearfix{
        clear: both;
      }
    </style>
    </head>
    <body>
      <div id="container">
        <div class="item"> A very loooooooooooooooooooooong text </div>
        <div class="item"> Another looooooooooooooooooooong text </div>
        <div class="clearfix">  </div>
       </div>
    </body>
    </html>​
    
    3 回复  |  直到 6 年前
        1
  •  209
  •   xor_eq    16 年前

    除此之外overflow:hidden,使用

    white-space:nowrap;
    
        2
  •  26
  •   Macmade    16 年前

    只需使用:

    overflow: hidden;
    white-space: nowrap;
    

    在项目的div中

        3
  •  3
  •   ruffin    6 年前

    使用css属性溢出。例如:

      .item{
        width : 100px;
        overflow:hidden;
      }
    

    overflow属性可以有以下值之一( 隐藏 , 纸卷 看得见的 ) .. 您可以使用als控制一个方向的溢出 溢出-x 或 溢出-y .

    我希望这有帮助。