css 文字垂直_CSS垂直文字

css 文字垂直

Almost every HTML element we create is thought of in the frame of horizontal.  We pay much more attention to widths than we do heights, especially when it comes to text within them. Sometimes we do, however, want to display element text in a vertical fashion.  In the old days of crippled Internet Explorers, this was mostly a losing battle.  These days, however, vertical text is a breeze.  Here's how to do it!

我们创建的几乎每个HTML元素都被视为水平框架。 我们对宽度的关注比对高度的关注要多得多，尤其是当涉及到其中的文本时。 但是，有时候我们确实希望以垂直方式显示元素文本。 在残破的Internet Explorer的早期，这主要是一场失败的战斗。 但是，如今，垂直文本变得轻而易举。 这是怎么做！

View Demo 观看演示

CSS (The CSS)

Vertical text is accomplished easily these days with CSS transforms:

如今，使用CSS转换可以轻松完成垂直文本：

.vertical-text {
	transform: rotate(90deg);
	transform-origin: left top 0;
}

Depending on which direction you'd like the text to display vertically, the rotation will be different, but it's that rotate value which will make the text vertical.  Here's a helpful tip:

根据您希望文字垂直显示的方向，旋转角度会有所不同，但是正是旋转值使文字垂直。 这是一个有用的提示：

.vertical-text {
	float: left;
}

Floating the element will essentially emulate an auto width!

浮动元素实际上将模拟自动宽度！

View Demo 观看演示

CSS transforms make loads possible, and are much more powerful than simply turning text vertical, but with the code provided above, the job is done.  Isn't progress grand?

CSS转换使加载成为可能，并且比简单地垂直转换文本要强大得多，但是使用上面提供的代码，这项工作就完成了。 进步不是很大吗？

翻译自: https://davidwalsh.name/css-vertical-text

css 文字垂直