HTML5 - 停止包裝

Question

我已經嘗試過其他答案，如白色空間的建議：包裹，;到目前爲止沒有任何工作。我的問題是，我如何阻止HTML文本的包裝？

當我最小化瀏覽器時，導航欄上的文本移出位置，我該如何阻止這種om發生？

這裏有一個pic of the problem ...

我的CSS

.menu, 
.menu ul, 
.menu li, 
.menu a { 
    margin: 0; 
    padding: 0; 
    border: none; 
    outline: none; 
    white-space: nowrap; 
} 

.menu { 
    margin-top: -8px; 
    height: 50px; 
    width: 100%; 
    position: absolute; right: 0; left: 0; 
    text-align: left; 

    background: rgb(63,76,107); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(63,76,107,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(63,76,107,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=0); /* IE6-9 */ 

    box-shadow: 0px 1px 3px #000000; 

    -webkit-border-radius: 1px; 
    -moz-border-radius: 1px; 
    border-radius: 1px; 
} 

.menu li { 
    position: relative; 
    list-style: none; 
    float: left; 
    display: block; 
    height: 40px; 
} 

.menu li a { /* Navigation Bar text */ 
    display: block; 
    padding: 0 20px; 
    margin: 15px 0; 
    line-height: 15px; 
    text-decoration: none; 

    font-family: sans-serif; 
    font-weight: bold; 
    font-size: 12px; 

    color: #FFFFFF; 
    /* text-shadow: 1px 1px 1px rgba(255,255,255,0.3); */ 

    -webkit-transition: color .4s ease-in-out; 
    -moz-transition: color .4s ease-in-out; 
    -o-transition: color .4s ease-in-out; 
    -ms-transition: color .4s ease-in-out; 
    transition: color .4s ease-in-out; 
} 

.menu li:first-child a{ border-left: none; } 
.menu li:last-child a{ border-right: none; } 
.menu li:hover > a { text-decoration: underline; } 
.menu li#navbar-logo:hover > a { text-decoration: none; } 

.menu ul { 
    position: absolute; 
    top: 35px; 
    left: 0; 
    opacity: 0; 
    background: rgba(63,76,107,1); 

    border-left: 1px solid #393942; 
    border-bottom: 1px solid #393942; 
    border-right: 1px solid #393942; 

    -webkit-border-radius: 0 0 2px 2px; 
    -moz-border-radius: 0 0 2px 2px; 
    border-radius: 0 0 2px 2px; 

    -webkit-transition: opacity .75s ease .1s; 
    -moz-transition: opacity .75s ease .1s; 
    -o-transition: opacity .75s ease .1s; 
    -ms-transition: opacity .75s ease .1s; 
    transition: opacity .75s ease .1s; 
} 

.menu li:hover > ul { 
    opacity: 1; 
} 

.menu ul li { 
    height: 0; 
    overflow: hidden; 
    padding: 0; 

    -webkit-transition: height .25s ease .1s; 
    -moz-transition: height .25s ease .1s; 
    -o-transition: height .25s ease .1s; 
    -ms-transition: height .25s ease .1s; 
    transition: height .25s ease .1s; 
} 

.menu li:hover > ul li { 
    height: 35px; 
    overflow: visible; 
    padding: 0; 
} 

.menu ul li a { 
    width: 100px; 
    padding: 10px 0 10px 10px; 
    margin: 0; 

    border: none; 
    border-bottom: 1px solid #353539; 
} 

.menu ul li:last-child a { 
    border: none; 
} 

.menu li#navbar-logo, 
.menu li#navbar-about, 
.menu li#navbar-shop, 
.menu li#navbar-contact, 
.menu li#navbar-community { 
    margin-top: 5px; 
} 

.menu li#navbar-logo { 
    margin-top: 3px; 
} 

.menu li#navbar-logo, 
.menu li#navbar-about, 
.menu li#navbar-shop, 
.menu li#navbar-contact, 
.menu li#navbar-community { 
    margin-left: -13px; 
    margin-right: 5px; 
} 

.menu li#navbar-about, 
.menu li#navbar-shop, 
.menu li#navbar-contact, 
.menu li#navbar-community { 
    margin-left: 5px; 
    margin-right: 5px; 
} 

#navbar-logo a{ 
    color: #FFC8C8; 
    text-shadow: 2px 2px 2px rgba(255, 0, 0, 1); 
    font-size: 50px; 
    font-family: Intrique Script Personal Use; 
} 

的HTML

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Title of Webpage</title> 
    <link rel="stylesheet" href="main.css"> 
</head> 
<body> 
    <header> 
     <nav class="navbar"> 
      <ul class="menu"> 
       <li id="navbar-logo"><a href="#">Arc Studios</a></li> 
       <li id="navbar-about"><a href="#">About Us</a> 
        <ul> 
         <li><a href="#">FAQ's</a></li> 
         <li><a href="#">Our Inception</a></li> 
         <li><a href="#">Locations</a></li> 
        </ul> 
       </li> 
       <li id="navbar-shop"><a href="#">Store</a> 
        <ul> 
         <li><a href="#">Games</a></li> 
         <li><a href="#">OS's</a></li> 
         <li><a href="#">Other</a></li> 
        </ul> 
       </li> 
       <li id="navbar-contact"><a href="#">Contact</a> 
        <ul> 
         <li><a href="#">Email</a></li> 
         <li><a href="#">Help Centre</a></li> 
        </ul> 
       </li> 
       <li id="navbar-community"><a href="#">Community</a> 
        <ul> 
         <li><a href="#">Forums</a></li> 
         <li><a href="#">Events</a></li> 
        </ul> 
       </li> 
      </ul> 
     </nav> 
    </header> 
    <br></br> 
    <footer class="footer"> 
     <p><small>&copy; Copyright Arc Innovations 2013, All rights reserved</small></p> 
    </footer> 

</body> 
</html> 

Answer 1

也許嘗試這樣的事情？

.menu, 
.menu ul, 
.menu li, 
.menu a { 
    margin: 0; 
    padding: 0; 
    border: none; 
    outline: none; 
    white-space: nowrap; 
    overflow: hidden; 
} 

這將是更容易被http://www.jsfiddle.net例子來調試。

Answer 2

我認爲white-space: nowrap;應該工作。