Question

我正在使用HTML5并希望以垂直格式显示字符串：例如：WELCOME可以显示为：

w ^

电子

→

C

0

中号

电子

有可能实现吗？如果是，我该怎么做？注意：在示例中，有两个换行符。请避免一次换行。

Answer 1

您可以word-break使用一些小宽度：

p{
    width:10px;
    word-break: break-all;
}

JSFiddle

Answer 2

您可以使用旋转文字。但对于您的情况，这可能会更好：http://www.youtube.com/watch?v=DcqmT8D_kzA#t=235

.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

示例：http://jsfiddle.net/cbDEK/

Answer 3

如果您不想旋转文字，也可以使用大字母间距：

.text{
    letter-spacing: 999em;
    word-break: break-all;
}

以垂直顺序显示一些文本

3 个答案: