网站制作之用CSS创建竖排文字的四种方法

↑上一篇:网站制作完美CSS代码书写的五个方面
↓下一篇:网站制作之CSS之overflow属性用法   

方法一:使用 ems(推荐做法)

网站制作当给父级元素指定 overflow: hidden 的时候,父元素就会扩展以包含浮动? 这个方法就类似这个,关键是使用了 em,并给每个字母之间添加了空格。漂亮又整洁,对不对?并且,这种方法可以给你的文字指定任意的font-size,因为我们使用了em,它就相当于选择字体的x-height,给我们提供了更多的灵活性。但是,你是否又一次想起,有时一行中会有不止一个字母。可实际情况是,你可以安全使用这种方法,因为我已经指定了一个相当大的letter-spacing,以确保一行只会有一个字母。


  到目前为止,据我所知,这是最好的跨浏览器兼容的解决方案


  方法二:静态包裹


  通过这个方法,我们将每个字母包裹在一个span中,然后在CSS中设置它的display属性为block。这种方法的问题是,除了可怕的标签外,它需要你手工去给每个字母用span括起来。如果这些文字是由CMS动态生成的,那就别用这种方法了。


  方法三:<br/>标签


  一种可能的方法(但不推荐)是在每个字母后面添加<br />标签来实现竖排文字


  方法四:给容器指定一个宽度


  如果可能的话,网站制作远离JavaScript吧。如果我们给容器元素指定一个宽度,并强迫文字换行,如何?那是可以的。在这个方法中,我们给h1定义很窄的宽度,然后是其文字的宽度等于外围的宽度,最后设置word-wrap 等于 break-word,这样我们就可以强制每个字母单独在一行。不过需要注意的是, break-word是一个CSS3的属性,并不是所有浏览器都兼容。如果排除旧浏览器的话,这个问题貌似就可以解决了。

广州网站制作 网站制作之用CSS创建竖排文字的四种方法天传网络 http://www.snl.cn

发布时间:2013-2-28  修改时间:2013-2-28  点击次数:  
↑上一篇:网站制作完美CSS代码书写的五个方面
↓下一篇:网站制作之CSS之overflow属性用法   
相关文章:
网友评论: