以垂直格式显示文本

Question

<span class="helpBtn">HELP</span> 帮助文本应保持在跨度内

• 它应该显示如下......

• 我尝试过文本转换,但它没有给我正确的解决方案.

• 其实我不想改变跨度内的文字.它应该像我所展示的那样留在跨度内.它不应该被编辑.

Answer 1

尝试在CSS中打破单词.如果你需要更多的间距,你的单词打破每个2个或更多的字母使用字母间距或只是填充.

CSS:

.wrapper {
   position: fixed;
   background-color: green;
   top: 30px;
   left: 0;
   width: 20px;
   border-radius: 0 10px 10px 0;
   color: white;
   font-size: 13px;
   padding: 5px;
   word-wrap: break-word;
}

HTML:

<div class="wrapper">
    HELP
</div>

https://fiddle.jshell.net/1hwd5j7g/