テキストをコンテナの外に展開する方法を見つけようとしています。目的の効果は、テキストをそのコンテナーよりも大きく拡張することです。元。//
これをどうやって始めたらいいのかわからない。私はHTMLとCSSが初めてで、助けが必要です:)
テキスト「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;
}
これを行う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/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;
}
おそらく、CSS オーバーフロー プロパティを探しているでしょう。
http://www.w3schools.com/cssref/pr_pos_overflow.asp
上記の例を再現するコードについては、このフィドルを参照してください: http://jsfiddle.net/E5atK/