将两个箭头放在文本的左右两侧

Question

我想在下面的代码中的文本周围放两个箭头(在文本的左右两侧(：

const contrast = document.getElementById("contrast");
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("This is the text");

.contrast-container {
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
/*outline: 0.1vw dashed orange;*/
}
.vertical-center-contrast {
position: absolute;
top: 73.5vh; /*top: 82vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 0;  
margin: 0 auto;
}
.contrastShow {
animation: contrastAnimeShow 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
@-webkit-keyframes contrastAnimeShow {
0%    { opacity: 0; top: 4vh }
100%  { opacity: 1; top: 1.2vh }
}
.left-arrow {
position: relative;
}

<div class ="vertical-center-contrast contrast-container">
<span class="left-arrow">&#8250;</span>
<p id="contrast" class="contrast"></p>
<span class="right-arrow">&#8249;</span>
</div>

我用箭头的html代码创建了两个跨度，以创建箭头和文本，但没有运气。。。

Answer 1

有多种方法可以做到这一点。最简单的方法是将display: flex;添加到vertical-center-contrast中

const contrast = document.getElementById("contrast");
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("This is the text");

.contrast-container {
/*overflow: hidden;*/
height: 10vh;
width: 100%;
z-index: 11;
/*outline: 0.1vw dashed orange;*/
}
.vertical-center-contrast {
/*position: absolute;*/
/*top: 73.5vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
display: flex;
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 1;  
margin: 0 auto;
}
.left-arrow {
position: relative;
}

<div class ="vertical-center-contrast contrast-container">
<span class="right-arrow">&#8249;</span>
<p id="contrast" class="contrast">ddd</p>
<span class="left-arrow">&#8250;</span>
</div>

Answer 2

用不可见元素包裹箭头，然后用justify-content定位它们。

const contrast = document.getElementById("contrast");
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("This is the text");

.contrast-container {
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
position: relative;
outline: 0.1vw dashed orange;
}
.vertical-center-contrast {
position: absolute;
top: 73.5vh;
/*top: 82vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 0;
margin: 0 auto;
}
.contrastShow {
animation: contrastAnimeShow 0.3s ease-in-out;
animation-fill-mode: forwards;
}
.arrows {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
@-webkit-keyframes contrastAnimeShow {
0% {
opacity: 0;
top: 4vh
}
100% {
opacity: 1;
top: 1.2vh
}
}

<div class="vertical-center-contrast contrast-container">
<div class="arrows">
<span class="right-arrow">&#8249;</span>
<span class="left-arrow">&#8250;</span>
</div>
<p id="contrast" class="contrast">Some text</p>
</div>

如果希望每个箭头(和文本(之间有空格，可以使用：

const contrast = document.getElementById("contrast");
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text");

.contrast-container {
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
position: relative;
outline: 0.1vw dashed orange;
}
.vertical-center-contrast {
position: absolute;
top: 73.5vh;
/*top: 82vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 0;
white-space: normal;
word-break: break-all;
width: calc(100% - 40px);
left: 20px;
margin-top: 0;
}
.contrastShow {
animation: contrastAnimeShow 0.3s ease-in-out;
animation-fill-mode: forwards;
}
.arrows {
width: calc(100% - 20px);
height: 100%;
position: absolute;
top: 0;
left: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
@-webkit-keyframes contrastAnimeShow {
0% {
opacity: 0;
top: 4vh
}
100% {
opacity: 1;
top: 1.2vh
}
}

<div class="vertical-center-contrast contrast-container">
<div class="arrows">
<span class="right-arrow">&#8249;</span>
<span class="left-arrow">&#8250;</span>
</div>
<p id="contrast" class="contrast"></p>
</div>