Показать текст в вертикальном формате

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

попробуйте под кодом. это определенно поможет вам.

<div class="vertical-text">Hello Vertical Texter!</div> 
<style> 
    .vertical-text { 
    background: #e23737 none repeat scroll 0 0; 
    border: 1px solid #b52c2c; 
    box-shadow: 2px -2px 0 rgba(0, 0, 0, 0.1); 
    color: #fff; 
    float: left; 
    margin-left: 40px; 
    padding: 10px; 
    text-transform: uppercase; 
    transform: rotate(90deg); 
    transform-origin: left top 0; 
} 
</style> 

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