HTML CSS Box Styling

私は自分のHTMLコードを補うためにいくつかのCSSをしようとしています。私は効果的にテキストの量に基づいてサイズを変更する小さなボックスを作ろうとしています。現在のところ、これは実際の動作のようです。 enter image description here HTML CSS Box Styling

本質的に、テキストの周りに小さなボックスを形成したいと思います。文字列が長すぎる場合は、最後の 'ボックス'を画像に表示します。文字列を切り取って次の行に移動します。

CSSコードと使用例が含まれています。

<style type="text/css"> 
    boxytest 
    { 
    padding: 10px; 
    text-align: center; 
    line-height: 400%%; 
    background-color: #fff; 
    border: 5px solid #666; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
    -webkit-box-shadow: 2px 2px 4px #888; 
    -moz-box-shadow: 2px 2px 4px #888; 
    box-shadow: 2px 2px 4px #888; 
    } 
</style> 

<body> 
    <div align="center"> 
    <boxytest> Hey guys! What's up? </boxytest> 
    </div> 
</body>

ご協力いただきまして誠にありがとうございます。

出典

2012-03-30 user432584920684

ように見えますが、[フィドル]（http://jsfiddle.net）でこれを置くことができますか？ – zzzzBov

ここはフィドルです。 http://jsfiddle.net/zBExV/ – user432584920684

まず、マークアップの観点から、boxytestをクラスにして、新しい要素を作成しないと思っています。そして、 'align = center'は使わないでください。それは維持する痛みです。 CSSで

<body> 
    <p class="boxy">Test sentence</p> 
<body>

ザ・：

私はこのような何かをするだろう

.boxy { 
    padding: 10px; 
    text-align: center; 
    line-height: 400%%; 
    background-color: #fff; 
    border: 5px solid #666; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
    -webkit-box-shadow: 2px 2px 4px #888; 
    -moz-box-shadow: 2px 2px 4px #888; 
    box-shadow: 2px 2px 4px #888; 
    /* to prevent word wrapping */ 
    white-space: nowrap; 
    overflow: hidden; 
    }

The last bit is based on this postを。

出典

2012-03-30 13:35:17 chipcullen

私はあなたのアドバイスを取ったので、今のように見えます。 http://jsfiddle.net/zBExV/1/ しかし、より小さな幅に変更する方法はありますか。追加の単語は垂直に伸びるべきですか？ – user432584920684

申し訳ありません - 私は間違っていました - あなたはテキストを折り返したくないと思っていました。これは、空白の宣言のためのものです。 Simon Westが正しかったです：あなたはdisplay：inline-blockを追加する必要があり、それを中心にしたい場合、text-align：centerが適用された親要素が必要です。私はあなたのフィドルを更新しました：http://jsfiddle.net/zBExV/2/ – chipcullen

ありがとうございました！ 'Tis大いに感謝！ :) – user432584920684

チップクーレンスは、あなた自身の要素を発明することはおそらくこれについて最善の方法ではないと言います。しかし、キースタイルdeclerationあなたの質問に答えるために、あなたの欠落がdisplay:inline-block;

jsfiddle here

出典

2012-03-30 13:39:33

ご協力いただきありがとうございます！ – user432584920684

答えて

関連する問題