css - 自動改行 - レスポンシブ テキスト 折り返し




cssを使用してテキストの後に行を作成します (3)

flexboxを使う:

h2 {
    display: flex;
    align-items: center;

}

h2 span {
    content:"";
    flex: 1 1 auto;
    border-top: 1px solid #000;
}

html:

<h2>Title <span></span></h2>

私は私のh2タグのそれぞれの後に行を作ろうとしています。 h2の見出しの長さがh2からh2と異なるために、幅をどのように指定すればよいかわかりません。

:afterメソッドを使って線を作成します

       h2:after {
       position: absolute;
       content: "";
       height: 2px;
       background-color: #242424;
       width: 50%;
       margin-left: 15px;
       top: 50%;
       } 

ここでコードをチェックしてくださいhttp://jsfiddle.net/s9gHf/http://jsfiddle.net/s9gHf/あなたが見ることができるようにラインが広くなり過ぎるのを見て、そしてウェブサイトを広くし過ぎるようにしなさい。


これは私がこれをどのように行うかです: http://jsfiddle.net/Zz7Wq/2/ : http://jsfiddle.net/Zz7Wq/2/

後ではなく背景を使用し、背景を隠すためにH1またはH2を使用します。 上記の方法ではありませんが、うまくいきます。

CSS

.title-box { background: #fff url('images/bar-orange.jpg') repeat-x left; text-align: left; margin-bottom: 20px;}
.title-box h1 { color: #000; background-color: #fff; display: inline; padding: 0 50px 0 50px; }

HTML

<div class="title-box"><h1>Title can go here</h1></div>
<div class="title-box"><h1>Title can go here this one is really really long</h1></div>

追加の<span>これを実現でき<span>

HTML

<h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>

CSS

h2 {
    position: relative;
}

h2 span {
    background-color: white;
    padding-right: 10px;
}

h2:after {
    content:"";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.5em;
    border-top: 1px solid black;
    z-index: -1;
}

http://jsfiddle.net/myajouri/pkm5r/

余分な<span>がないがoverflow: hiddenが必要な別の解決策overflow: hidden <h2> overflow: hiddenれてい<h2>

h2 {
    overflow: hidden;
}

h2:after {
    content:"";
    display: inline-block;
    height: 0.5em;
    vertical-align: bottom;
    width: 100%;
    margin-right: -100%;
    margin-left: 10px;
    border-top: 1px solid black;
}

http://jsfiddle.net/myajouri/h2JRj/





css