如何使用JavaScript从下至上垂直显示文本？

Question

我想从下到上垂直显示给定的单词，并且单词中的每个字母必须在另一个字母下方。 （就像下面的图片一样。）我想使用JavaScript实现上述场景。

谢谢。

Answer 1

像这样：

 var element = document.querySelector('.blubb'); var stringToArray = element.innerHTML.split(''); var reveresedArray = stringToArray.reverse(); element.innerHTML = ''; // empty contents from .blubb reveresedArray.forEach(function(letter){ element.innerHTML += '<p>' + letter + '</p>'; // add letter with <p> tag });

 <div class="blubb">Ineedtodisplay</div>

Answer 2

 function display() { var i = 0; var str="YourString"; var temp = str.split(""); var reversestr = temp.reverse(); for (var i = 0, len = reversestr .length; i < len; i++) { document.write(reversestr [i] + "<br />"); } };

 <!DOCTYPE html> <html> <body> <h2>My Vertical Display</h2> <button type="button" onclick="display()"> Click me to display.</button> </body> </html>

Answer 3

从上到下写，但先还原

document.write(str.split('').reverse().join('<br>'));

Answer 4

<script>
    var str = "ineedtodisplay";
    document.getElementById('a').innerHTML = str.split('').join('<br/>');
</script>

Answer 5

JS + CSS解决方案：

 // reverse the element's string order var elm = document.querySelector('p'); elm.textContent = elm.textContent.split("").reverse().join("");

 p{ font: 20px monospace; /* monospace fonts are best since each character has the same width */ width: 20px; /* same as font-size */ word-break: break-all; /* enabling the non-spaced text to break */ }

 <p>TEXT GOES FROM BOTTOM</p>

如何使用JavaScript从下至上垂直显示文本？

问题描述

5 个解决方案

解决方案1
1 2017-11-08 07:18:13

解决方案2
1 已采纳 2017-11-08 07:44:25

解决方案3
0 2017-11-08 07:16:59

解决方案4
0 2017-11-08 07:17:07

解决方案5
0 2017-11-08 08:10:14

JS + CSS解决方案：

如何使用JavaScript从下至上垂直显示文本？

问题描述

5 个解决方案

解决方案1 1 2017-11-08 07:18:13

解决方案2 1 已采纳 2017-11-08 07:44:25

解决方案3 0 2017-11-08 07:16:59

解决方案4 0 2017-11-08 07:17:07

解决方案5 0 2017-11-08 08:10:14

JS + CSS解决方案：

解决方案1
1 2017-11-08 07:18:13

解决方案2
1 已采纳 2017-11-08 07:44:25

解决方案3
0 2017-11-08 07:16:59

解决方案4
0 2017-11-08 07:17:07

解决方案5
0 2017-11-08 08:10:14