在單行上HTML響應較長的標題HTML CSS

我在一個響應式網站上工作。我有一些很長的標題，比如「Savez-vous vraiment ce qu'il se passe sur le ter terrain？」。在單行上HTML響應較長的標題HTML CSS

目標是標題將始終保留在一行上，而不管Bootstrap的分辨率和行爲如何。

我能做到這一點與white-space:no-wrap但標題不會在中心了......

我沒有看到比減少不同分辨率的功能，字體大小另一種解決方案。

謝謝您的幫助:)

來源

2015-09-01 Victor Lebkowski

如果它所推移兩行呢？在這種情況下有什麼不期望的後果？ – kidwon

http://fittextjs.com/不確定，因爲具體的請求（總是在一行），但也許這個插件可以幫助...順便說一句，在小型手機屏幕上的文字可能是不可讀的，如果你減少字體太多我會打破它在兩個或更多的線）... – sinisake

是否有東西絕對定位在該標題下，以便它必須保持單線？ – kidwon

你可以有包裹一個div圍繞你的標題，並使用文本對齊：中心

<div class="titlewrapper"> 
    <div>Savez-vous vraiment ce qu'il se passe sur le terrain ?</div> 
</div> 

.titlewrapper { 
    width: 100%; 
    text-align: center; 
}

來源

2015-09-01 12:39:09

謝謝，但它會在縮小瀏覽器的大小或解決 –

以防止包裝看到：http://stackoverflow.com/questions/679804/prevent-wrapping-of-containers-span-or-div –

如果您大致知道標題的最大長度，你可以使用vw unit，這意味着寬度的百分比。這是大多數現代瀏覽器的supported。

爲了您的字符串，這將是這個樣子：

h1 { 
    font-size: 3vw; 
}

JS-Fiddle

來源

2015-09-01 13:37:09

在單行上HTML響應較長的標題HTML CSS

回答

相關問題