4种方法实现文字竖向排列 您所在的位置:网站首页 exelce表格文字竖排 4种方法实现文字竖向排列

4种方法实现文字竖向排列

2024-02-11 22:21| 来源: 网络整理| 查看: 265

有时候,我们需要对网页某个区域的文字竖排,竖向排列,横向的当然大家都见惯了,对于竖排,一时间找不到思路了,呵呵,其实和横排一样简单,下面介绍4种方法来实现CSS文字竖排。

第一种方法:将需要竖排显示的字符放在span中,在CSS中设置span的display属性为block,不过不推荐使用这种方法,因为有些麻烦,代码如下:

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

第二种方法A:同样使用CSS,在需要竖向显示的地方,强制定义显示区域的宽度,这样字符会自动竖向排列:请看具体代码:

Vertical Text h1 { width: 50px; font-size: 50px; word-wrap: break-word; } NETTUTS

第二种方法B:同样是使用CSS,推荐使用这种方法,觉得这个方法兼容性也好,而且代码简洁,字符也容易控制。

竖向排列的文字 h1 { width: 50px; font-size: 50px; word-wrap: break-word; letter-spacing: 20px; } 我爱北京天安门

第三种方法:使用JavaScript(不推荐,其实这么一个小小的功能,动用JS就太不划算了,毕竟我们有比这更有效、更简洁的办法)

Vertical Text h1 span { display: block; } NETTUTS var h1 = document.getElementsByTagName(‘h1′)[0]; h1.innerHTML = ‘’ + h1.innerHTML.split(”).join(‘’) + ‘’;

四种方法介绍完了,究竟哪一种更适合您呢?自己比较下,根据你自己的实际情况选择吧,每种方法各有千秋。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有