Question

我尝试将纯HTML文本垂直旋转并与水平HTML文本保持一致。

这是我想要做的一个示例图像。有人能告诉我如何做到这一点吗？

enter image description here

Answer 1

我已经开始尝试这样的工作了。在 jsFiddle 处查看结果。

我正在使用set to scale while keeping its height relative to its width using this approach的容器div。

在此容器div内，我已将所有div设置为绝对定位。为了使旋转的div向右定位，我先将它们设置为左下角，将transform-origin设置为0 0，然后将它们旋转-90使用transform: rotate(-90deg);的度数，然后我通过设置其div属性将第二个轮换left移动了一段。

我正在使用em进行定位，以确保div的位置根据字体的大小而变化。

我正在使用名为FitText的jQuery插件来调整div的{{1}}属性。

我已使用font-size来扩展部分transform: scale();的内容。

您会发现需要对FitText插件设置，div的{{1}} em和div的{{1}}值进行一些调整属性和缩放使您的文本适合。但是一旦你做对了，它会在改变容器宽度top时精确地缩放。

如果要更改容器的纵横比，则必须使用正确的纵横比创建自己的透明图像。

<强> HTML

left

<强> CSS

div

<强> JS

<div>
    <div class="container">
        <div>ABCDEFGHIJKLMNO</div>
        <div>ABCDEF</div>
        <div>ABCDEFGHIJKLMNO</div>
        <div>HELLO</div>
        <div>QRSTUVWXWZABC</div>
        <div>DEFGHIJKL</div>
    </div>
    <img src="https://dl.dropboxusercontent.com/u/6928212/threebytwo.png" />
</div>

Answer 2

我在这里做了一个例子：

<!doctype html>
 <html>
 <head>
<style type="text/css">.vertical{
 width: 0px;
  word-wrap: break-word;color:grey;float:left;margin-left:10px;}
.horizontal{float:left;margin-left:10px;}
</style>
</head>
  <body>
<div class="horizontal">l e t t e r s</div><br>
<div class="vertical">abc</div>
<div class="horizontal">l e t t e r s</div><br>
<div class="vertical">abc</div>
<div class="horizontal">l e t t e r s</div><br>
<div class="vertical">abc</div>
<div class="horizontal">l e t t e r s</div>
</body>
</html>

是否可以将垂直文本和水平文本并排？

2 个答案: