Bootstrap竖写
Bootstrap vertical writing
我想用 Bootstrap 垂直书写文本,但不想将文本旋转 90°。垂直,但转动且难以阅读。
但实际上是这样写的:竖着不转
我认为 Bootstrap 有办法做到这一点?你知道些什么吗?
在Bootstrap和CSS中绝对没有特定的方式来单独以他的特定方式写...
我想做这种事情的唯一方法是在每个字母后的行上添加一个 return。例如,尝试 HTML <br>
标签。这种技术的主要问题是语义,考虑到单词将被拆分。
你可以这样做:
CSS
.verticaltext{
width:1px;
word-wrap: break-word;
white-space:pre-wrap;
}
您可能想看看这个教程!
https://davidwalsh.name/css-vertical-text
简单来说,您可以使用 CSS 来完成此操作。
.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
}
writing-mode: vertical-rl;
text-orientation: mixed;
// or
writing-mode: vertical-rl;
text-orientation: upright;
也试试这些值
/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;
/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;
我想用 Bootstrap 垂直书写文本,但不想将文本旋转 90°。垂直,但转动且难以阅读。
但实际上是这样写的:竖着不转
我认为 Bootstrap 有办法做到这一点?你知道些什么吗?
在Bootstrap和CSS中绝对没有特定的方式来单独以他的特定方式写...
我想做这种事情的唯一方法是在每个字母后的行上添加一个 return。例如,尝试 HTML <br>
标签。这种技术的主要问题是语义,考虑到单词将被拆分。
你可以这样做:
CSS
.verticaltext{
width:1px;
word-wrap: break-word;
white-space:pre-wrap;
}
您可能想看看这个教程!
https://davidwalsh.name/css-vertical-text
简单来说,您可以使用 CSS 来完成此操作。
.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
}
writing-mode: vertical-rl;
text-orientation: mixed;
// or
writing-mode: vertical-rl;
text-orientation: upright;
也试试这些值
/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;
/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;