在容器外部展開文本

Question

我想弄清楚如何在我的容器外擴展我的文本。預期的效果是讓文本擴大到比其容器更大。例如：

我不知道該如何開始。我是新來的HTML和CSS，可以使用一些幫助:)

Answer 1

下面是做這件事的一種方法：

<div class="container"><span>EXAMPLE</span></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

​.container { 
    background: #ddd; 
    font-size: 30px; 
    width: 130px; 
    height: 15px; 
    overflow: hidden; 
} 
.container span { 
    position: relative; 
    top: -10px; 
    left: -7px; 
} 

http://jsfiddle.net/ZnxrT/

注意：頂部/左側偏移量是任意單位。您需要調整它們以適應您的要求。

Answer 2

您應該將固定大小應用於包含文本的框：示例。

這之後，你應該把在中間和大小的字母文字，因此比盒子的空間較大，並應用overflow: hidden

它應該是這樣的：

.box{ 
width: 50px; 
height: 10px; 
overflow: hidden; 
margin: auto; 
background-color: gray; 
} 

.text{ 
color: red; 
font-size: 14px; 
text-align:center 
vertical-align:middle; 
} 

Answer 3

您可能正在尋找CSS溢出屬性。

http://www.w3schools.com/cssref/pr_pos_overflow.asp

請參見本搗鼓代碼重新上面的例子：http://jsfiddle.net/E5atK/

Answer 4

這裏是一個工作示例 http://jsfiddle.net/8CaQx/

<div id="outer"><div id="inner">TEXT</div></div>​ 

#outer { 
    height: 36px; 
    width: 140px; 
    overflow: hidden; 
    background-color: black; 
} 

#inner { 
    position: relative; 
    top: -18px; 
    left: -10px; 
    font-size: 60px; 
    text-align: center; 
    vertical-align: middle; 
    font-family: arial, sans serif; 
    font-weight: 900; 
    color: red; 
}​