隐藏滚动条在DIV跨浏览器没有打破溢出文本

的设置： 中途下来的网页我建设我有我想成为其中滚动一个div内部的一些特大型的文本。文本应该在屏幕的右侧边缘运行，并且只能在水平方向滚动（如果我能够首先看到正确的话，我会在后面横向滚动）。隐藏滚动条在DIV跨浏览器没有打破溢出文本

我需要隐藏滚动条（目前我得到0或1或2！）。我使用chrome工作，但在Firefox，Safari和IE中仍然出现滚动条。

我发现this previous question，and this one which looks promising，这codepen example这不正是我想要它，但是当我试图将其应用到自己的代码就躲在四溢的文本（它看起来好像诀窍是隐藏四溢滚动条与容器，但我不能解决如何做到这一点，同时保持我的文本明显地溢出到右边）。

这里的取出我的示例代码背景：

.outer_container { 
     padding-top: 3rem; 
     padding-left: 15px; 
     margin-bottom: 5rem; 
    } 

    .middle_container{ 
     overflow-x:scroll; 
     white-space:nowrap; 
     width: 100%; 
     padding-top: 1rem; 
    } 

    #inner_container { 
     display:inline-block; 
     padding-bottom: 2rem; 
     overflow-x: scroll; 
    } 

    h1 { 
     font-size: 12rem; 
     line-height: 10rem; 
     margin-bottom: 1rem; 
    } 

    /* WORKS IN CHROME, SIMILAR THING FOR OTHER BROWSERS WITHOUT BREAKING TEXT OVERFLOW? */ 
    ::-webkit-scrollbar { 
     display: none; 
    }

<div class="outer_container"> 

    <div class="middle_container"> 

     <div id="inner_container"> 

      <h1>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur.</h1> 

     </div> 

    </div> 

</div>

任何帮助将不胜感激，我敢肯定解决方案是在codepen中，我只是对此很新，并努力看到我在做自己的网页时做错了什么。

来源

2017-01-26 Ham

这应该为你工作：

... 

.middle_container{ 
    white-space:nowrap; 
    width: 100%; 
    height: 400px; 
    overflow: hidden; 
} 

#inner_container { 
    overflow-x: auto; 
    width: 100%; 
    height: 100%; 
    padding-bottom: 15px; 
} 

...

Codepen：http://codepen.io/anon/pen/xgXXaX

来源

2017-01-26 15:30:40

啊哈开裂，就先看看这似乎是工作。我会在今天晚上在原地尝试。谢谢！ – Ham

神奇，只是诀窍。谢谢！ – Ham

不用客气;） –

隐藏滚动条在DIV跨浏览器没有打破溢出文本

回答

相关问题