html - {溢出-x : auto;} is overflowing vertically?

Question

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

有几个用overflow-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;
}