尊敬的用户，您好！很高兴为您答疑。
按照文字书写习惯，目前尚无原生属性可以实现文字纵向排列，为了实现此要求，一般会采用变相处理的办法。您可以参考以下代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>念奴娇 赤壁怀古</title>
<style type="text/css">
body {
padding:30px 100px
}
div {
float:right
width:1.5em
}
div.title {
font-size:xx-large
font-weight:bold
}
</style>
</head>
<body>
<!-- 注意下面标题中间的那个点也必须用div包住，否则它不会竖着显示-->
<div class="title">念奴娇<div>·</div>赤壁怀古</div>
<div>苏轼</div>
<div>大江东去</div>
<div>浪淘尽</div>
<div>千古风流人物</div>
<div>故垒西边人道是</div>
<div>三国周郎赤壁</div>
<div>乱石穿空</div>
<div>惊涛拍岸</div>
<div>卷起千堆雪</div>
<div>江山如画</div>
<div>一时多少豪杰</div>
<div>遥想公谨当年</div>
<div>小乔初嫁了</div>
<div>雄姿英发</div>
<div>羽扇纶巾</div>
<div>谈笑间</div>
<div>强虏灰飞烟灭</div>
<div>故国神游</div>
<div>多情应笑我</div>
<div>早生华发</div>
<div>人生如梦</div>
<div>一尊还酹江月</div>
</body>
</html>
希望我的回答对您有所帮助，如有疑问，欢迎继续咨询我们。
这个地方不建议用id 用class比较好<div class=zx>这是一个纵向排列的行</div>
.zx 如下定义
.zx {writing-mode:tb-rltext-align:left}
仅仅对IE有效 FF只能限制div宽度并用wordbreak强制换行
在许多使用场景下，会有让列表内元素竖着排列，高度不够，纵向换行的需求。本文教你如何实现一个竖着的元素排列。
实现元素纵向排列主要靠 css 的 writing-mode 属性和 float 属性。
设置 writing-mode 值为 vertical-lr , 可以使所有子元素纵向排列。
此时发现里面的子元素仍旧是横向排列，但文字变纵向了
再加上 float: left 让元素左排。
此时，元素已经变成纵向排列了，但由于未限制高度，元素将无限向下排列。同时子元素的文字排列方式也变成了纵向。
在给列表加一个高度。并重新设置子元素 writing-mode 属性便可解决
此时效果已经完成，但还有一个奇怪的问题
在添加到某个位置元素直接会跳到这列最后一个，不知这个问题为何会产生，但是在给子元素添加一个宽度后，bug 便神奇的好了。。
总结: writing-mode 是一个很长久的 css 属性了，新的值 vertical-lr 在大部分现代浏览器都已支持，在古老的 ie9 以下，也可用 lr 代替,所以这种实现方式是可兼容的。只是注意某些浏览器需要 --webkit- 或 --ms- 前缀。
writing-mode 属性 --MDN
