在容器外部展开文本

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; 
}​