垂直渲染內容：CSS中的attr（data-content）

我想使用CSS逐個垂直呈現文本。如果使用旋轉方法，我們可以得到如下圖所示，垂直渲染內容：CSS中的attr（data-content）

但我預計將呈現類似下面的文字，

有誰告訴我你對此有何建議？

注意：我設置使用「content:attr(data-content)」在CSS和數據內容是「HELLO」這段文字。

2016-02-12 Ponmalar

可以打破每個字符的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-12 06:16:59 ketan

如何：

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-12 05:54:18

嘗試使用這個簡單的HTML，而不是與CSS

<!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-12 06:05:46

垂直渲染內容：CSS中的attr（data-content）

回答

相關問題