如何使字母換行字母？

這是我認爲製作垂直文字的最佳方式。如何使字母換行字母？

如何讓leters「ello」與「h」排隊？

<p>Hello</p> 

p { 
width: 0.5em; 
font-size: 5em; 
word-wrap: break-word; 
}

來源

2017-03-27 Pathway

小寬度使得它所以每行1個字母這是我想要的。增加寬度不會打破字母。 – Pathway

@ Pathway，你的寬度太小，不能包含你的5em字母。第一個字母「H」實際上是粘在你的'p'元素之外，這就是爲什麼你不能將你的當前代碼垂直居中放置的原因。如果你將'overflow：hidden'設置爲你的'p'元素，你會看到字母「H」的一半將消失，換句話說，它會被隱藏，因爲它的一半在你的'p'外面元件。爲了垂直居中字母，他們都必須分享相同的寬度。 – Mers

取決於字體，0.5em太寬：它會導致兩個「l」最終在同一行上。或者是由設計？ –

如果你想以字母「H」，然後在下面的方法將做對齊字符。 text-align: center;將使字符居中它的分配空間。

p { 
 
    width: 0.5em; 
 
    font-size: 5em; 
 
    word-wrap: break-word; 
 
    text-align: center; 
 
}

<p>Hello</p>

更多有關text-align屬性可以閱讀here。

來源

2017-03-27 04:04:10 CodeMonkey

嘗試的代碼如下

<p>Hello</p>

CSS代碼

p { 
    width: 0.5em; 
    font-size: 5em; 
    word-wrap: break-word; 
    text-align: center; 
}

Demo

來源

2017-03-27 04:23:53

你的寬度設置爲段落標記，添加文字居中並添加寬度略高於0.5em。

p { 
 
width: 0.7em; 
 
font-size: 5em; 
 
word-wrap: break-word; 
 
text-align: center; 
 
letter-spacing: 7px; 
 
}

<p>Hello</p>

這是你所追求的？

來源

2017-03-27 04:50:10 Syfer

這取決於您的字體選擇。

檢查演示：https://jsfiddle.net/97odgsgr/1/

p { 
width: 0.5em; 
font-size: 5em; 
text-align: center; 
word-break: break-all; 
}

來源

2017-03-27 07:47:03 Maayi

如何使字母換行字母？

回答

相關問題