1

CSS を使用して、テキストを 1 つずつ縦方向にレンダリングしたいと考えています。回転メソッドを使用すると、次のようになります。

実回転

しかし、私は以下のようなテキストをレンダリングすることが期待されています.

期待される出力

誰かこれについてあなたの提案を教えてもらえますか?

注: CSS で ' ' を使用してこのテキストを設定していますcontent:attr(data-content)。データ コンテンツは "HELLO" です。

4

3 に答える 3

3

content:attr(data-content)次のような方法で各文字を分割できます。

.test::after {
    content: attr(data-content);
    font-size: 25px;
}
.test {
    width: 0;
    word-break: break-all;
}
<div class="test" data-content="Hello"></div>

于 2016-02-12T06:16:59.857 に答える
0

CSS の代わりに単純な HTML でこれを使用してみてください

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>
 
<style>
  h1 span { display: block; }
</style>
</head>
<body>
  
  <h1>
   <span> N </span>
   <span> E </span>
   <span> T </span>
   <span> T </span>
   <span> U </span>
   <span> T </span>
   <span> S </span>
  </h1>
   
</body>
</html>

于 2016-02-12T06:05:46.237 に答える
0

これはどう：

h1 span { display: block; }
<h1>
   <span> H </span>
   <span> E </span>
   <span> L </span>
   <span> L </span>
   <span> O </span>
  </h1>

または、次を使用してこのように試すことができますword-wrap: break-word;：

h1 {
    width: 50px;
    font-size: 50px;
    word-wrap: break-word;
  }
<h1> HELLO </h1>

于 2016-02-12T05:54:18.083 に答える