展开容器外的文本

Question

我试图找出如何在容器外扩展我的文本。期望的效果是使文本扩展大于其容器。例如，

我不知道如何从这开始。我是HTML和CSS的新手，可以使用一些帮助：）

Answer 1

您应该将固定大小应用于包含文本的框：示例。

之后，您应该将文本放在中间并调整字母大小，使其大于框的空间并应用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 2

这是一种方法：

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

这是一个工作示例 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;
}​

Answer 4

您可能正在寻找CSS溢出属性。

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

请参阅此小提琴，了解重新创建上述示例的代码：http://jsfiddle.net/E5atK/