HTML/CSS：文字を縦に書き、文字を水平に保つ方法

文字の向きを変えるハックの回転を使わずに、縦書きのテキストを書くことができるのだろうかと思います。だから、HTML/CSS：文字を縦に書き、文字を水平に保つ方法

、代わりに "START" の、私は5月のdiv要素内のテキストは次のように表示する：
S
T

R
T

"break-word：word-break"を使用し、要素の幅を0に設定しますが、テキストは中央に配置されません。 Vertical Text Direction
私は、テキストを回転させたくない、私はここで、文字の方向

を維持したいのか、私のコードの例である：文字がちょうどの重複がない左

に整列されます取得することができます。それを行うには

.vertical-text { font-size: 25px; word-break: break-word; width: 0; display: flex; justify-content: center; padding: 0; border: 1px solid rgba(0, 0, 0, 0.2); position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); } body, html { margin: 0; padding: 0; height: 100%; width: 100% }

<div class="vertical-text">START IT<div>

出典

2017-08-03 Mattew Eon

可能な重複：https://stackoverflow.com/questions/4264527/vertical-text-direction [縦の文字方向]の – Tapaka

可能な複製（ https://stackoverflow.com/questions/4264527/vertical-text-direction） – user3284463

私はスパンの各文字を非常に醜いところにラッピングしていますが、それを行うために私の言葉/言葉をループしません。さらに、の空白は空白文字を表示しません。 Abhitalksによって投稿された解決策は、私が探していたものです –

あなたがでwriting-mode CSSプロパティを使用することができますと一緒にCSSプロパティ。 ..、

をwriting-mode性を引用する
div { 
    writing-mode: vertical-lr; 
    text-orientation: upright; 
} 
[..]ブロックレベルのコンテナが積層さ方向であるブロックフロー方向、およびで方向を指定しますブロックコンテナ内のインラインレベルのコンテンツフロー。コンテンツは、上から下に垂直方向に、右から左に水平に、に流れます。次の垂直線は、前の線の左側に配置されます。

実際には、テキストの行を水平方向または垂直方向に配置するか、ブロックの進行方向を定義するかを定義します。

text-orientationプロパティは、行内のテキスト文字の向きを定義します。このプロパティは垂直モードでのみ有効です。

例約text-orientationかかわら

p:first-of-type { 
 
    writing-mode: vertical-lr; 
 
} 
 
p:last-of-type { 
 
    writing-mode: vertical-lr; 
 
    text-orientation: upright; 
 
}

<h4>With writing mode "vertical-lr"</h4> 
 
<p>Start</p> 
 
<hr> 
 
<h4>With writing mode "vertical-lr" and text-orientation "upright"</h4> 
 
<p>Start</p>

は警告さ：この技術の仕様が安定していないので

これは実験的な技術であり、互換性を確認の表さまざまなブラウザでの使用。実験的な技術であるの構文と動作は、仕様の変更に応じて、今後のバージョンのブラウザで変更される可能性があります。これによると

：https://caniuse.com/#search=text-orientation、ほぼすべてのブラウザがIE /エッジを除いて、今日のようにそれをサポートしているようです。

出典

2017-08-03 09:10:27 Abhitalks

おかげで@Abhitalks、それはまったく私が探していたものです！私はちょっとした問題があります。要素にスペースがあれば、すべての単語が水平に積み重ねられます。「START IT」のように、2つの単語の間にスペースを置く方法はありますか？ –

@MattewEon：ブラウザがサポートしていれば動作します。ここを参照してください：https://jsfiddle.net/abhitalks/Lgrxezmb/ – Abhitalks

さて、私は間違いをする必要があります。ありがとう、それは完全に仕事をする:) –

-1

いくつかの方法を。

チェックこのtutorial

アウトUPDATE

は私にそれを行うための最善の方法を提供します

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset=utf-8 /> 
 
<title>Vertical Text</title> 
 
    
 
<style> 
 
    h1 span { display: block; } 
 
</style> 
 
</head> 
 
<body> 
 
    <h1> START </h1> 
 
    
 
    <script> 
 
    var h1 = document.getElementsByTagName('h1')[0]; 
 
    h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') + '</span>'; 
 
    </script> 
 
</body> 
 
</html>

出典

2017-08-03 09:06:47 Zico

リンク専用の回答を使用しないでください：https://meta.stackexchange.com/q/8231/344751 –

あなたがそれらのいくつかを追加することができればよい "あなたの答えには「方法」があります。リンクはいつでも消滅し、ユーザーはクリックを保存します – Swellar

-1

あなたは試すことができます：

.vertical-text { 
 
    margin: 0 auto 2em; 
 
    width: 0; 
 
    word-wrap: break-word; 
 
} 
 

 
body { 
 
    font-family: Helvetica, sans-serif; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    margin-bottom: 1.5em; 
 
}

<h1>Vertically Written Text</h1> 
 

 
<h2 class="vertical-text">Vertical</h2> 
 

 
<p>Tested in Chrome, Safari, Firefox, IE 8, IE 9, IE 10 and IE 11.</p>

出典

2017-08-03 09:10:35

私はワードブレークと幅0について知っているが、テキストは左に揃えてあり、私はそれを中心にしたい –

HTML/CSS：文字を縦に書き、文字を水平に保つ方法

答えて

関連する問題