CSS無文字換行

請參閱下面引用的代碼http://jsbin.com/eveqe3/edit。CSS無文字換行

我需要在項目divs中顯示文本，使文本只出現在具有指定寬度的綠色框中，其餘行需要隱藏。任何建議，請...

<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>

來源

2010-07-22 Mithun Sreedharan

只是一個供參考，如果你的高度設置爲12像素，具有2px的填充，你應該使用字體大小：10px的所以邊界不不包括角色的底部。我傾向於使用EM作爲衡量標準，儘管如此，它可以更好地根據用戶更改進行擴展。 – 2010-07-22 12:10:42

請務必在所有目標瀏覽器中查看您的結果，因爲字體/大小在默認情況下有所不同。 – 2010-07-22 12:12:33

當然@Mark，謝謝 – 2010-07-22 12:25:55

104

此外溢出：隱藏，使用

white-space:nowrap;

來源

2010-07-22 11:46:17

是啊！，這是我想要的！ – 2010-07-22 11:50:33

只需使用：

overflow: hidden; 
white-space: nowrap;

在你的項目的申報單

來源

2010-07-22 11:37:14 Macmade

使用CSS屬性溢出。例如：

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

overflow屬性可以具有象許多值中的一個（隱藏，滾動，可見）..你可以ALS控制在一個方向上僅溢出使用溢出 - X或溢出-y。

我豪

來源

2010-07-22 11:38:41 dejavu

請參閱'overflow：hidden'應用在這裏jsbin.com/eveqe3/2/edit，第二行的一部分在框中可見。是否有可能避免文本進入下一行？ – 2010-07-22 11:48:47

CSS無文字換行

回答

相關問題