Question

我有一个高度和宽度不同的div框网格：http://jsfiddle.net/9cnDS/

其中一些应该溢出水平溢出-x：auto，但它们会垂直溢出？..

{{message}}应保留在1行，当它长于框的标准宽度时，文字应自动水平溢出

<div class="col2">
    <div class="box9 border">
      <div class="message">
        <blockquote>
          <div class="moreLeft">{{message}}</div>
        </blockquote>
      </div>
    </div>
</div>

这是css：

.col2 {
  width: 65%;
  height:100%;
}
.box9 {
  height:15%;
  overflow-x: auto;
}
.moreLeft {
    margin-left: -2%;
}
.message {
    padding-top: 3.5%;
    text-align: center;
}
blockquote {
  height: 40px;
  width: auto;
  padding: 5px 10px;
  margin: 0 0 20px;
  font-size: 1.5vw;
  border-left: 11px solid #000;
}

Answer 1

不确定您要完全尝试做什么，但添加white-space: nowrap会阻止文本溢出：

.box9 {
    overflow-x: auto;
    white-space: nowrap;
}

Answer 2

.box9 {
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
}

除非我完全误解你的问题，否则这会有所帮助。

Answer 3

有了空格和溢出，你应该没问题：

.box9 {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}

{overflow-x：auto;}是否垂直溢出？

3 个答案: