CSS创建竖排文字的简单方法

在制作网页的时候我们经常需要创建一些竖排的文字，或许这对你来说是一件很简单的事情，但是你是否想过用CSS可有N种创建竖排文字的方法？下面是由我翻译自Nettuts+的文章，希望这几种方法能够给你带来一些提示。

方法一：<br/>标签

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


以下为引用的内容：

<h1>
   N <br />E <br />T <br />T <br />U <br />T <br />S
</h1>

千万不要使用使用这种方法，它是跛脚和草率的。

方法二：静态包裹

通过这个方法，我们将每个字母包裹在一个span中，然后在CSS中设置它的display属性为block。


以下为引用的内容：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>

<style>
  h1 span { display: block; }
</style>
</head>
<body>

  <h1>
   <span> N </span>
   <span> E </span>
   <span> T </span>
   <span> T </span>
   <span> U </span>
   <span> T </span>
   <span> S </span>
  </h1>

</body>
</html>
 

这种方法的问题是，除了可怕的标签外，它需要你手工去给每个字母用span括起来。如果这些文字是由CMS动态生成的，那就别用这种方法了。

方法三：使用JavaScript

我最初的想法是用JavaScript动态地添加span标签，这样我们就避开了方法二遇到的问题。


以下为引用的内容：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>

<style>
  h1 span { display: block; }
</style>
</head>
<body>
  <h1> NETTUTS </h1>

  <script>
    var h1 = document.getElementsByTagName('h1')[0];
    h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') + '</span>';
  </script>
</body>
</html>

这个方法绝对是一个进步。以上方法中，我们将一行文本(NETTUTS)分拆放到一个数组中，并且将每个字母用span标签括起来。虽然我们可以用如for语句或$.map来筛选这个数组，但是更好更快的方法是手动地同时将文字插入和括起来。虽然相比方法二，这种方法更好，但是仍然不推荐此方法：

在JavaScript被禁用的情况下会破坏你的布局。

理想的情况下，如果可能的话，我们应该使用CSS来完成这个任务。

时间： 2024-10-26 09:01:16

CSS创建竖排文字的简单方法的相关文章

css 文字竖排: CSS创建竖排文字的简单方法

在制作网页的时候我们经常需要创建一些竖排的文字,或许这对你来说是一件很简单的事情,但是你是否想过用CSS可有N种创建竖排文字的方法?希望这几种方法能够给你带来一些提示.方法一:<br />标签     一种可能的方法(但不推荐)是在每个字母后面添加<br />标签来实现竖排文字: 123 <h1>   N <br />E <br />T <br />T <br />U <br />T <br />S

CSS中使用white-space创建竖排文字的简单方法

J E F F R E Y

DIV+CSS创建三栏网页布局方法介绍

三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.        绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格.创建固定宽度布局或者"液态"(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页.     现在,我们都开始抛弃基于表格的布局技术,许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方

css控制竖排文字方法

一个一行内的解决方法.不知道你有没有记得,当给父级元素指定overflow: hidden的时候,父元素就会扩展以包含浮动?这个方法就类似这个,关键是使用了em,并给每个字母之间添加了空格:   <!doctype html> <html> <head> <meta charset=utf-8 /> <title>vertical text</title> <style>   h1 {     width: 1em;   

使网页文字竖排的三种方法

网页 竖排效果制作方法有三:图片法.软回车法和样式表(CSS)法,下面就把具体制作方法介绍如下: 一.图片法 图片法又可以分为两种,一是抓图法,二是制图法 1.抓图法 抓图法就是使用文字处理软件如 Word .Wps office 之类的软件,用竖排的方法输入文字.然后按键盘上的"Print Screen"拷屏,再打开制图软件,粘贴成一个新文件,保存成适应网络传输的"Gif"."Png"."jpeg"格式即可.强烈建议使用&q

CSS使网页文字竖排

竖排在文字处理办公软件中非常容易就可以实现.由于这种效果在网页制作中并不多见,所以这个问题的讨论比较少.但是在制作具有中国古代特色的网站,如文字历史.书法.名胜古迹旅游等等网站时,如果用上竖排的文字,配以古色古香的背景及朴实陈旧的色彩,在视觉上会获得意想不到的效果. 样式表的文字处理属性中有两个重要的属性:writing-mode和text-align. 1. writing-mode(设置对象书写方向) 语法:writing-mode : lr-tb.tb-rl 参数:lr-tb:从左向右,从

WPS文字自由裁剪图片的简单方法

  WPS文字自由裁剪图片的简单方法.本文讲述了用WPS文字单手闭眼来随心所欲来剪裁图片,先来几个例子: 先看个五角型的: 这个是浮云型的: 这个是八角型的: 第一步:在WPS文字文档中,选择插入--形状,选择一个五角星,然后按住SHIFT键加鼠标左键,在文档中画一个五角星.

JavaScript获取css行间样式,内连样式和外链样式的简单方法_javascript技巧

[行间样式获取] <div id='div1' style="backgroud:red">测试</div> <script> var odiv=document.getElementById('div1'); //先获取到要获取样式的元素标签,也就是获取到div1 console.log(odiv.style.background); //这样我们就可以获取到了行间的样式了 </script> [内连样式获取] <html>

php简单创建zip压缩文件的方法_php技巧

本文实例讲述了php简单创建zip压缩文件的方法.分享给大家供大家参考,具体如下: /* creates a compressed zip file */ function create_zip($files = array(),$destination = '',$overwrite = false) { //if the zip file already exists and overwrite is false, return false if(file_exists($destinati