Как сделать чтобы текст уходил за границу div слева

148

19 марта 2019, 17:30

Обычное поведение текста, если он больше чем размер ограничивающего div и добавлены свойства white-space: nowrap; overflow: hidden; - текст выходит за границу div справа и исчезает.

Как сделать чтобы текст при превышении размера div уходил и за его левую границу? А правая часть текста (конец предложения) оставалась у левой границы div.

Т.е. чтобы если предложение не помещается в отведенное ему место - обрезалось бы его начало а не конец?

---edit---

В общем мне нужно чтобы 2 предложения отображались из центра в разные стороны (влево и вправо) и исчезали за границами div. Div- динамичной ширины, при ее изменении оба предложения одинаково обрезаются. Должно быть примерно так:

|...row olleh .ecnetnes elpmis si sihT||This is simple sentence. hello wor...|

Answer 1

Не уверен, что есть безкостыльный метод для подобного, поэтому вот:

div { 
  width: 200px; 
  height: 20px; 
  border: 1px solid red; 
  position: relative; 
  overflow: hidden; 
} 
 
span { 
  position: absolute; 
  top: 0; 
  right: 0; 
  white-space: nowrap; 
}

<div> 
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, porro!</span> 
</div>

UPD

div { 
  width: 500px; 
  height: 20px; 
  border: 1px solid red; 
  position: relative; 
  overflow: hidden; 
} 
 
div::before, 
div::after { 
  content: '...'; 
  position: absolute; 
  background-color: white; 
  height: 100%; 
  z-index: 2; 
} 
 
div::after { 
  right: 0; 
} 
 
div span:nth-child(1) { 
  position: absolute; 
  top: 0; 
  right: 51%; 
  white-space: nowrap; 
} 
 
div span:nth-child(2) { 
  position: absolute; 
  top: 0; 
  left: 51%; 
  white-space: nowrap; 
}

<div> 
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, porro!</span> 
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, porro!</span> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как уменьшить общий размер слайдера

176

HTML

Screenshot with JavaScript

У меня на сайте есть карта от 2гисИ нужно сделать скрин этого блока с картой на js, решил использовать библиотеку html2canvas и когда скрипт это делает...

141

HTML