css控制竖直文字显示

最新推荐文章于 2023-09-11 18:17:19 发布

会做饭的技术男

最新推荐文章于 2023-09-11 18:17:19 发布

阅读量208

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hjijbki2jcab&title=css%E6%8E%A7%E5%88%B6%E7%AB%96%E7%9B%B4%E6%96%87%E5%AD%97%E6%98%BE%E7%A4%BA

版权

前端专栏收录该内容

2507 篇文章 12 订阅

订阅专栏

假如有一天，你把水平文字看腻味了......

我建议你不妨试试垂直文字显示，就像这样：

我

是

竖

直

显

示

的

；

哈哈！

言归正传，怎么把一段话，垂直显示呢？

方法1：

//把下面代码另存为html试试就知道了；

//少些了些代码，适合有基础的同学观看，不会再问我；

h1 span { display: block; }
<h1>
<span> N </span>
<span> E </span>
<span> T </span>
<span> T </span>
<span> U
<span> T </span>
<span> S </span>
</h1>

方法2：

//把下面代码另存为html试试就知道了；

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title> <style>
h1 { width: 50px; font-size: 50px; word-wrap: break-word; }
</style> </head>
<body>
<h1> NETTUTS </h1>
</body>
</html>

方法3：

//把下面代码另存为html试试就知道了；

<!DOCTYPE html>
<html>
<head>
<title>竖向排列的文字</title>
<style>
h1 { width: 50px; font-size: 50px; word-wrap: break-word; letter-spacing: 20px; } </style> </head>
<body>
<h1>竖向排列的文字</h1>
</body>
</html>

方法4：

//javascript实现的，复杂化了，不过可以装逼嘛

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

谢谢观看！