Блог

Главная - Вопросы по программированию - Расположите две стрелки слева и справа от текста

Расположите две стрелки слева и справа от текста

#html #css

#HTML #css — код

Вопрос:

Я хочу поместить две стрелки вокруг текста в приведенном ниже коде (слева и справа от текста).:

 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">amp;#8250;</span>
           <p id="contrast" class="contrast"></p>
           <span class="right-arrow">amp;#8249;</span>
</div>

Я создаю два пролета с html-кодом стрелок, чтобы создавать стрелки и текст в строке, но безуспешно…

Комментарии:

1. установить display: inline в абзац

Ответ №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">amp;#8249;</span>
       <p id="contrast" class="contrast">ddd</p>
       <span class="left-arrow">amp;#8250;</span>
</div>

Комментарии:

1. И как уменьшить пробел между каждой стрелкой и текстом ..?

Ответ №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">amp;#8249;</span>
    <span class="left-arrow">amp;#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">amp;#8249;</span>
    <span class="left-arrow">amp;#8250;</span>
  </div>
  <p id="contrast" class="contrast"></p>
</div>

Комментарии:

1. Спасибо за ответ… плюс один… И как уменьшить пробел между каждой стрелкой и текстом ..?

2. Просто добавьте width: calc(100% - 20px); left: 10px; к .arrows этому .

3. Я изменил приведенный выше ответ ^

4. В этом-то и проблема … если у нас будет более длинный текст, он будет перекрываться стрелками…

5. Исправил это, см. Выше ^

Метки: