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

これを行う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/

注: 上/左のオフセットは任意の単位です。要件に合わせて調整する必要があります。

于 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 に答える