以垂直格式显示文字

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/

Answer 2

尝试以下代码。它肯定会帮助你。

shoppingList[3...3] = ["item4", "item5", "item6"]

Answer 3

使用CSS：

<style>
  h1 span { display: block; }
</style>

<h1>
<span> H </span>
<span> E </span>
<span> L </span>
<span> P </span>
</h1>

使用Javascript：

<style>
   h1 span { display: block; }
</style>

 <h1><span> HELP </span></h1>

<script>
   var h1 = document.getElementsByTagName('h1')[0];
   h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') +'</span>';
</script>

来源：http://code.tutsplus.com/tutorials/the-easiest-way-to-create-vertical-text-with-css--net-15284