Использование flexbox для div с оверлеем видео, который показывает / скрывает Javascript и соответствует автоматическому размеру видео. Текст в этом оверлейном div отлично переносится в любом браузере, кроме IE и Edge, где он выходит за пределы div вместо переноса.

Я пытался использовать white-space, overflow min-width и различные изменения CSS, которые были предложены другим, у которых есть подобные проблемы, но ни один из них не работал для меня.

Приведенный ниже код сильно урезан по сравнению с исходной формой, поэтому, надеюсь, я не упустил ничего важного. Я удалил код для нескольких других div из основного div "Box", которые также скрывают / отображаются с помощью JS, но не отображаются, пока отображается этот div, поэтому он специфичен для этого div, поскольку у другого нет длинных текстовых полей .

Я попытался добавить дополнительный CSS в H3 "infoText", чтобы попытаться обернуть, выровнять, выровнять и т. Д., Но ничто не решает эту проблему переполнения в Edge и IE.

<div id="Box">
  <video id="myvid" width="100%">
    <source src="video1.mp4">
  </video>

  <div id="intro"> // this div is an overlay for video player
      <h3 id="infoText">Lots of text goes here........</h3>
     // this text overflows on both sides of the div
      <button class="mybutton" id="start">Start</button>
  </div>
</div>


#Box {
  position: relative;
  width: 100%;
  height: auto;
}
#intro {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 0px;
}
1
Richard R 24 Окт 2019 в 13:09

2 ответа

Лучший ответ

Попробовав десятки конфигураций в CSS-значениях родительского и дочернего элементов div, я решил эту проблему, добавив max-width к идентификатору элемента H3 infoText. Все остальное в таблице стилей осталось без изменений. В настоящее время это, по-видимому, решает проблему отсутствия переноса в IE и Edge, не вызывая при этом каких-либо других явных проблем. Я предполагаю, что все другие браузеры имеют максимальную ширину по умолчанию, поэтому эта проблема не возникает внутри flexbox, поэтому трудно понять, почему продукты MS не имеют.

#infoText {
max-width:80%;
}
0
Holden Chev 25 Окт 2019 в 10:34

Если я правильно понимаю вашу статью, вам нужно сделать что-то подобное в вашем стиле CSS.

text-overflow: ellipsis;  /* IE 6+, FF 7+, Op 11+, Saf 1.3+, Chr 1+*/
-o-text-overflow: ellipsis;  /* for Opera 9 & 10 *
-ms-text-overflow: ellipsis; /*IE 8*/

Я надеюсь, это поможет вам.

-1
Daniel Capek 24 Окт 2019 в 10:14
58539014