CSS坚排文字

html-css011

CSS坚排文字,第1张

CSS有个属性 很遗憾 only ie

<style>

p{

writing-mode: tb-rl

}

</style>

<p>

writing-mode属性有两个值lr-tb和tb-rl,前者是默认的左-右、上-下,后者是上-下、右-左。

比如:

p{

writing-mode: tb-rl

}

可以结合direction排版。

</p>

其他的我会给 P标签设置1em的宽度

<style>

p{

width:1em

}

</style>

<p>

writing-mode属性有两个值lr-tb和tb-rl,前者是默认的左-右、上-下,后者是上-下、右-左。

比如:</p>

多列就要配合 height 和overfow了,不过IE太恶心了,还是需要hack才行

实现的方法很多,其中一种 你看看

<!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/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{margin:0padding:0font-size:12px}

.box{ width:500pxheight:30px}

h3{height:30pxline-height:30pxpadding-left:10pxborder-bottom:1px #999 solidposition:relativeoverflow:hidden}

h3 b{display:blockposition:absolutetop:0right:0left:300pxwidth:60pxheight:30pxline-height:30pxcolor:#000}

</style>

</head>

<body>

<div class="box">

<h3>健康<b>2009.4.19</b></h3>

</div>

</body>

</html>