垂直渲染内容：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）

回答

相关问题