當標題爲兩行長時，修復標題後面的行的方法

我的CSS已設置爲使我的文章標題在文本後面有兩條紅線（該行在文本後面消失）。當標題是一行時，效果會很好，但當它進入第二行時，效果會變得不那麼好。您可以點擊此處查看：當標題爲兩行長時，修復標題後面的行的方法

http://onedirectionconnection.com/2013/08/one-direction-win-song-of-the-summer/

我只是想在後面的線移動到div的中間，並在標題中線路最長的兩端只是顯示（像它在在上面的頁面左側）。

如果有人可以幫我弄清楚如何解決這個問題，將不勝感激。我做了一個的jsfiddle在這裏幫助：http://jsfiddle.net/tC99W/

這裏是我的CSS：

.section-title{ 
    font-family: 'Arvo', serif; 
    position: relative; 
    font-size: 25px; 
    z-index: 1; 
    overflow: hidden; 
    text-transform: uppercase; 
    text-align: center; 
    text-shadow: #FFF 1px 1px,#ccc 2px 2px; 
    background-color: #fff; 
} 

.section-title:before, .section-title:after { 
    position: absolute; 
    top: 40%; 
    overflow: hidden; 
    width: 50%; 
    height: 4px; 
    content: '\a0'; 
    border-bottom: 3px solid #DA5969; 
    border-top: 1px solid #DA5969; 
    box-sizing: content-box; /* + vendor specific versions here */ 
} 
.section-title:before { 
    margin-left: -52%; 
    text-align: right; 
} 
.section-title:after { 
    margin-left:2%; 
    text-align:left; 
}

HTML：

<h1 class="section-title">The Title Goes Here</h1>

感謝您的幫助提前！

來源

2013-10-10 nellygrl

您需要使用.container和你.section-title之間的<div>這<div>應該有:before和:after僞類類似，你已經做了。

額外的<div>（我們稱之爲.title-container）圍繞着.section-title將收縮和成長的寬度和高度與其中的文字。 .title-container和.section-title也應顯示爲inline-block爲了居中它們，添加保證金/填充和根據文本增長/收縮。

我也有些感動的CSS規則fromthe .section-title到.title-container

看看更新的jsfiddle：http://jsfiddle.net/grim/tC99W/3/，它可能更容易理解這種方式。

編輯：擴大行容器的邊緣：
這是另一種更新的jsfiddle：http://jsfiddle.net/tC99W/10/

基本上你應該讓.title-container拓展所以它不應該是一個inline-block而是block元素。邊界也應該更寬（我把width: 50%;，但它實際上有點長）。最重要的部分是玩標題的z-index和:before和:after元素。

來源

2013-10-11 05:27:55 grim

非常感謝您抽出時間來弄清楚這一點。我喜歡在線條定位，但唯一的問題是，當標題短，紅線移動與文本而不是向外擴展到容器的邊緣。在這裏看到：http://jsfiddle.net/tC99W/8/你知道有什麼方法可以使線改變大小取決於標題的內容？ – nellygrl

我以爲你想擁有特定寬度的線條並隨文字移動。無論如何，我已經編輯了我的答案。這應該工作。我沒有在不同的瀏覽器上測試過，所以對此的反饋會很好。 – grim

非常感謝！這就是訣竅！我檢查了這個答案！ :-) – nellygrl

您不必爲此添加另一個框。看看那Working Fiddle

這是相關的變化。

.section-title:before, .section-title:after { 
    position: absolute; 
    top: 40%; 
    height: 4px; 
    width: 4%; 
    content: ''; 
    border-bottom: 3px solid #DA5969; 
    border-top: 1px solid #DA5969; 
} 
.section-title:before { 
    left:0; 
} 
.section-title:after { 
    right:0; 
}

編輯：它看起來很醜，只有一行。

假設標題來總是先在容器內，你可以這樣做That（同樣，無需添加其他容器）。但請注意，這取決於假設。所以你應該使用類似於嚴峻的解決方案。

來源

2013-10-11 08:47:38 avrahamcool

非常感謝！我喜歡當標題不跨越到兩行這種方法的樣子，但問題是，當它是一個簡短的標題，紅色線留出了利潤近 - 在這裏看到：http://jsfiddle.net/tC99W/7 /你知道有什麼方法可以補救嗎？ – nellygrl

當標題爲兩行長時，修復標題後面的行的方法

回答

相關問題