文字竖排，从上到下排列，仿古文的写法

复制代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>这里填写标题</title>
<meta name="keywords" content="这里填写关键词" />
<meta name="description" content="这里填写说明内容" />

<script language="JavaScript" type="text/javascript">
<!--JS代码位置-->
</script>

<style type="text/css">
<!--CSS样式代码位置-->
.container {
   display: inline-block;
   width: 150px; /*根据需求调整宽度*/
   height: 150px;
   overflow: hidden;
}
 
.container p {
   writing-mode: vertical-rl; /*从右向左竖排*/
  float:right;

}
</style>

</head>

<body>

这里填写HTML代码
<div class="container">
    <p>这里是竖排的文本内容</p><br>
<p>这里是竖排的文本内容1</p>
<p>这里是竖排的文本内容2</p>
<p>这里是竖排的文本内容3</p>
<p>这里是竖排的文本内容4</p>
</div>

</body>
</html>
View Code
复制代码

主要是writing-mode: vertical-rl; 这样，至于从右到左是float:right;了

posted @   calochCN  阅读(11)  评论(0)  编辑  收藏  举报
相关博文：
·  好久不弄css导航条,这里再布一下
·  从前做前端的时候， 联通的好多html5活动， 页面布局如何整齐，回顾一个常用的
·  实现文本的竖向排版
·  [css] 实现文本的竖向排版
·  [css] 实现文本的竖向排版
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
历史上的今天：
2016-01-05 UML系列，使用UML实现GOF Design patterns，常用模式类图解读
2016-01-05 StarUML 系列，静态图与动态图，用例图，类图【ps:熟悉一下starUML】
点击右上角即可分享
微信分享提示
AI IDE Trae