JS + CSS解决方案：

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解决方案：

＆＃13;

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

＆＃13;

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 */
}

＆＃13;

<p>TEXT GOES FROM BOTTOM</p>

＆＃13;

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

5 个答案:

JS + CSS解决方案：