怎样用CSS控制字竖着显示

如果单纯针对ie8以下浏览器,css可以使用layout-flow :vertical-ideographic;进行竖着显示;其他浏览器如火狐,Chrome等都不支持该css属性,它也不是w3的标准属性;目前来看,针对竖着排版html文字,没有太好的解决办法,给出的静态文字方案有一个字宽的div,然后都右浮动:p{ width:1em;font-size:30px...
怎样用CSS控制字竖着显示
layout-flow:vertical-ideographic;2006-10-31
1、首先判断浏览器类型,IE浏览器中可以利用2种样式来控制。
一种是设置CSS样式为:writing-mode:tb-rl;
另一种是设置CSS样式为:layout-flow: vertical-ideographic;
但是这两种方法只适用于IE浏览器
2、为了兼容谷歌、火狐等各种浏览器,最好用css中的宽度属性来控制。
设置字符宽度,经过多次测试,如果是中文字竖排,将宽度设置为1.5em为最佳,具体的代码如下所示:

<div style="width:1.5em; ">研究互联网络和电脑应用技术的IT技术</div>2015-12-07
CSS

里边的参数要改一下。怎么改我可不知道。2006-10-31
如果单纯针对ie8以下浏览器,css可以使用layout-flow :vertical-ideographic;进行竖着显示;其他浏览器如火狐,Chrome等都不支持该css属性,它也不是w3的标准属性;
目前来看,针对竖着排版html文字,没有太好的解决办法,给出的静态文字方案有一个字宽的div,然后都右浮动:p{ width:1em;font-size:30px;letter-spacing:1em;word-break:break-all;}它的问题是文字要固定;另一种通过js,拆分文字,也弄成一字宽的标签,进行排列(中英文显示也是个问题),但是总的来说,都不是好的解决办法;
html5和css3也没有直接的属性,它只有旋转属性rotate,不过文字都倒着,阅读都很不方便;
分析到最后,都没有好太好方案,尽量少用,实在没办法,尽量用js来模拟控制,竖排文字常见是古代中国书籍排版,如果有一天是国人开发css国际标准,或许会标准性支持它。
2015-09-17
你可以将容器的宽度刚好大于字体的大小2015-11-29
layout-flow:vertical-ideographic;2015-11-12
用换行,<br/>2015-11-20
mengvlog 阅读 8 次 更新于 2025-06-20 01:32:13 我来答关注问题0
  •  校易搜全知道 CSS文字竖排怎么实现?

    一、使用writing-mode属性 在CSS中,可以通过设置writing-mode属性来实现文字的竖排。例如,设置writing-mode为vertical-rl,可以实现从右向左的竖排文字。这种方法适用于大多数场景,操作简单直观。二、结合transform属性 除了writing-mode属性,还可以使用CSS的transform属性来实现文字的竖排效果。通过旋转元素,...

  •  文暄生活科普 如何让文字竖着排列

    要让文字竖着排列,可以通过CSS样式来实现,特别是使用`writing-mode`属性。在Web开发中,竖排文字的需求并不罕见,特别是在设计需要展示亚洲语言的页面时。`writing-mode`属性正是用来控制文本的排列方向的,它有几个常用的值,如`horizontal-tb`、`vertical-rl`和`vertical-lr`。通过设置这个属性,可以...

  • 如果单纯针对ie8以下浏览器,css可以使用layout-flow :vertical-ideographic;进行竖着显示;其他浏览器如火狐,Chrome等都不支持该css属性,它也不是w3的标准属性;目前来看,针对竖着排版html文字,没有太好的解决办法,给出的静态文字方案有一个字宽的div,然后都右浮动:p{ width:1em;font-size:30px...

  • 1、首先打开hbuilder软件,新建一个html文件,里面写入一个div并设置class属性,在上方耳朵style标签中设置body标签的背景色,方便后面观察效果。2、然后设置class的样式,这里给div一个比较小的宽度并设置行高和边框,然后设置word-warp属性,该属性表示允许长单词换行到下一行,再设置一下letter-spacing调整...

  •  阿暄生活 如何在同一页面编辑不同文字方向

    可以通过选择不同的字体来标识重要信息或区分不同类别的文本。调整字号可以突出显示特定的单词或句子,使页面内容层次分明。应用加粗和斜体:加粗文本可以强调某些关键信息,使其更加醒目。斜体则常用于表示书名、人名或其他需要特殊标注的文本。利用CSS控制文字方向:direction属性:可以直接设置文本的方向,如ltr...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部