HTML中如何让文字竖排

HTML中如何让文字竖排,第1张

设置CSS样式,writing-mode属性

兼容谷歌、火狐等浏览器(测试以后IE暂不兼容):

writing-mode:vertical-rl//垂直方向,从右到左

writing-mode:vertical-lr//垂直方向,从左到右

IE私有属性(其他浏览器不兼容):

writing-mode:lr-tb//默认,从左到右,从上到下。

writing-mode:tb-rl//从上到下,从右到左。

writing-mode:tb-lr//水平方向,从上到下,从左到右。

代码实例:

<!DOCTYPE html>

<head>

    <meta charset="UTF-8" />

    <title>言成科技-文字竖排实例</title>

    <style type="text/css">

        .box1 { writing-mode: vertical-rl }

        .box2 { writing-mode: vertical-lr }

        .box3 { writing-mode: lr-tb }

        .box4 { writing-mode: tb-rl }

        .box5 { writing-mode: tb-lr }

    </style>

</head>

<body>

    <div class="box1">提供高品质教育服务让每个人遇到更好的自己</div>

    <div class="box2">提供高品质教育服务让每个人遇到更好的自己</div>

    <div class="box3">提供高品质教育服务让每个人遇到更好的自己</div>

    <div class="box4">提供高品质教育服务让每个人遇到更好的自己</div>

    <div class="box5">提供高品质教育服务让每个人遇到更好的自己</div>

</body>

</html>

Tips:经过测试,vertical-rl、vertical-lr兼容谷歌火狐等浏览器,lr-tb只兼容ie7及以下浏览器,tb-rl、tb-lr只兼容IE8及以上浏览器。

2.设置CSS样式,固定宽度

对当前元素设置固定宽度,当文字一行容纳不下两个字时,文字自动换行,就形成了文字竖排。

代码实例:

<!DOCTYPE html>

<head>

    <meta charset="UTF-8" />

    <title>言成科技-文字竖排实例</title>

    <style type="text/css">

        .box { 

            width: 20px

            line-height: 18px 

        }

    </style>

</head>

<body>

    <div class="box">提供高品质教育服务 让每个人遇到更好的自己</div>

</body>

</html>

3.添加HTML的br标签

利用br标签换行的属性,实现文字竖排需求。

代码实例:

<!DOCTYPE html>

<head>

    <meta charset="UTF-8" />

    <title>言成科技-文字竖排实例</title>

</head>

<body>

    <div class="box">提<br>供<br>高<br>品<br>质<br>教<br>育<br>服<br>务<br>让<br>每<br>个<br>人<br>遇<br>到<br>更<br>好<br>的<br>自<br>己</div>

</body>

</html>

了解更多文字处理方式:《jQuery特效实战开发》

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。

2、在index.html中的<caption>标签中,添加样式代码:style="white-space : nowrap"。

3、浏览器运行index.html页面,此时表格内部表格的标题文字会横着显示。

出现这种情况可能是网速慢或者有病毒导致网速慢,也可能是网页脚本下载不全或者浏览器不好用,可以尝试着换一下浏览器。以下方法可以解决这个问题:

一、用360浏览器医生一键修复试试,或者用360安全卫士的系统修复试试。也可能你打开的网页就有问题,比如失效了,证书过期了,网站服务器有问题了等等。

二、下载谷歌等浏览器测试一下,如果好用,上淘宝、QQ空间,或浏览其它网页时就用这个软件,这些都是不用IE做内核的,与你用IE不冲突。

三、一般是网络、有时是路由器的问题,你不用路由器试试、你所上的网站、浏览器的问题引起的,有时浏览器要清理一下临时文件。这样的问题,最有可能是网站本身的问题,浏览器不适合这个网站,还有就是打开这个网站或QQ空间的同时,不要在开启其他程序。

网页浏览器是个显示网站服务器或文件系统内的文件,并让用户与这些文件交互的一种应用软件。它用来显示在万维网或局域网等内的文字、图像及其他信息。这些文字或图像,可以是连接其他网址的超链接,用户可迅速及轻易地浏览各种信息。

大部分网页为HTML格式,有些网页需特定浏览器才能正确显示。个人电脑上常见的网页浏览器按照2010年1月的市场占有率依次是微软的Internet Explorer、Mozilla的Firefox、Google的Chrome、苹果公司的Safari和Opera软件公司的Opera。浏览器是最常用的客户端程序。万维网是全球最大的链接文件网络文库。

网页浏览器被视为能够处理CERN庞大电话簿的实用工具。在与用户交互的前提下,网页浏览器根据Gopher和Telnet协议,允许所有用户能轻易地浏览别人所编写的网站。可是其后插入图片到浏览器的举动,使之成为了互联网的"杀手级应用"。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6201895.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-17
下一篇 2023-03-17

发表评论

登录后才能评论

评论列表(0条)

保存