答案 0 :(得分:0)
为您找到解决方案:
let word = "Settnrgh";
let list = word.split('');
let firstword = list[0] + list[1] + list[2];
let secondword = list[3] + list[4];
let thirdword = list[5] + list[6] + list[7];
$(".left").text(firstword);
$(".center").text(secondword);
$(".right").text(thirdword)
.parent {
display: grid;
grid-template-columns: auto auto auto auto;
width: 300px;
height: 200px;
background-color: white;
margin: 15px auto;
text-align: center;
}
.parent .text-div {
writing-mode: vertical-rl;
text-orientation: upright;
padding: 0;
margin: 0;
font-size: 80px;
font-weight: bold;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="left text-div">
</div>
<div class="center text-div">
</div>
<div class="right text-div">
</div>
<div></div>
</div>
</div>
答案 1 :(得分:0)
您可以这样做:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #111;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 836px;
max-width: 100%;
height: 478px;
margin: 0 auto;
background: #fff;
}
.flex > span {
width: 33.33%;
font-size: 6em;
font-weight: bold;
font-family: sans-serif;
text-align: center;
}
.flex > span:nth-child(8) {
visibility: hidden;
}
<div class="flex">
<span>S</span>
<span>T</span>
<span>R</span>
<span>E</span>
<span>N</span>
<span>G</span>
<span>T</span>
<span>hidden</span>
<span>H</span>
</div>