0

我试图弄清楚如何将我的文本扩展到其容器之外。期望的效果是使文本扩展得比其容器大。前任。//文本在其容器之外展开

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

4

4 回答 4

2

您应该对包含以下文本的框应用固定大小：EXAMPLE。

之后，您应该将文本放在中间并调整字母大小，使其大于框的空间并应用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;
}
于 2012-07-16T06:33:54.213 回答
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/

注意：顶部/左侧偏移量是任意单位。您需要调整它们以满足您的要求。

于 2012-07-16T06:36:08.240 回答
1

这是一个工作示例 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;
}​
于 2012-07-16T06:38:41.030 回答
0

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

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

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

于 2012-07-16T06:37:57.537 回答