html css 实现文字竖排模拟古籍排版

最新推荐文章于 2024-11-20 17:24:01 发布

一粒马豆

最新推荐文章于 2024-11-20 17:24:01 发布

阅读量2k

点赞数

分类专栏： html5 文章标签： CSS HTML 文字竖排古籍排版

本文链接：https://blog.csdn.net/MAILLIBIN/article/details/103115591

版权

本文介绍了如何使用CSS的writing-mode属性和HTML配合，实现文字竖排，模拟古籍的排版效果。通过设置writing-mode为tb-rl或vertical-rl，并结合float:left，可以达到理想中的竖排布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<title>仿古竖排文字</title> 
<style type="text/css">
.verticallines{
	background-color:#EEAD0E;
	font-family:"Source Han Serif SC";
	height:360px;
	margin:1em;
	padding:2em;
	font-size:1em;
	writing-mode:tb-rl;  
	-webkit-writing-mode:vertical-rl;
}
.verticallines span{
	color:red;
	font-size:2em;
	float:left;
	vartical-align:middle;
}
</style>
</head>
<body>

	<div class="verticallines">
		<span>易音宝典</span>
		亿忆亦一易 一易亦亿忆 观世界万千音声 悟道 空即是色 色即是空 空不异色 色不异空 音声 有意义 无意义 皆因人与人 人与世界之结缘而成 同一音 于百千门语言中幻化出无数种语义 甚是奥妙 而人能分别之语音音素大抵不过百数 所以以音声连通异国他族之语义 实乃以有限为无限 以一当百 妙哉 妙哉 现举数例与众分享 以窥是法之玄机
		<br/>
		<span>鹦歌狸诗</span>英文 鹦鹉聪慧 能言亦能歌 狐狸狡猾 能文亦能诗 英国之民有智勇 曾称日不落帝国