CSS无文字换行

76

我需要以这样一种方式在项目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>

html css text

— 密敦·斯雷达兰（Mithun Sreedharan）
source

仅供参考，如果您将高度设置为12px，填充为2px，则应使用font-size：10px，以便边框不会覆盖字符的底部。我更喜欢使用EM作为衡量标准，以便更好地根据用户更改进行扩展。

— Mark Schultheiss

请确保在所有目标浏览器中查看结果，因为默认情况下字体/大小会有所不同。

— Mark Schultheiss

190

另外要溢出：隐藏，使用

white-space:nowrap;

— xor_eq
source

1

是的，这就是我想要的！

— Mithun Sreedharan

1

只是以为我可能会在这里添加一些内容，因为我无法让我的<pre>块停止换行，所以前面的pre {} css元素当然会覆盖我尝试使用.pre {}类进行的其他操作。这可能是某些人对包装感到悲伤的原因。

— MitchellK

26

只需使用：

overflow: hidden;
white-space: nowrap;

在项目的div中

— 麦克马德
source

3

使用css属性溢出。例如：

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

溢出属性可以具有多个值之一（（隐藏，滚动，可见）..您也可以仅使用overflow-x或overflow-y来控制一个方向的溢出。

我希望这有帮助。

— 艾哈迈德·阿曼
source

请参阅overflow:hidden此处应用jsbin.com/eveqe3/2/edit，第二行的一部分在框中可见。是否可以避免文本进入下一行？

— Mithun Sreedharan