文字を折り返して並べる方法は？

これは、私が縦書きのテキストを作るために考えた最良の方法でした。文字を折り返して並べる方法は？

"h"で "ello"の行をどのように並べるのですか？

<p>Hello</p> 

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

出典

2017-03-27 Pathway

小さな幅は、それは私が欲しいものである各行の1つの文字があります。幅を増やしても文字を壊すことはありません。 – Pathway

@Pathway、あなたの幅はあなたの5em文字を含むには小さすぎます。最初の文字 "H"は実際には 'p'要素の外側に張り付いているので、現在のコードで文字を縦に並べることはできません。あなたが 'p'要素に' overflow：hidden'をセットすると、文字 "H"の半分が消えることがわかります。つまり、半分が 'p'の外側にあるので、素子。文字を縦に並べるには、同じ幅を共有する必要があります。 – Mers

フォントによっては、0.5emが広すぎるため、同じ行に2つの '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

文字を折り返して並べる方法は？

答えて

関連する問題