Как заставить свойство CSS переполнения работать со скрытым как значение

123

Мне тяжело с overflow: hidden.

По сути, я пытаюсь скрыть переполнение неупорядоченного списка, который находится в <div>.

Я понятия не имею, почему это не работает.

Вместо того, чтобы скрывать его, он разбивает мой список с горизонтального на вертикальный.

Неупорядоченный список - это карусель, а контейнер - это список.

Ниже мой код CSS;

div.body .container .images {
    background: url(/images/images-background.jpg);
    height: 62px;
    margin-bottom: 17px;
    width: 384px;
}
div.body .container .images #images-previous {
    cursor: pointer;
    float: left;
}
div.body .container .images #images-next {
    cursor: pointer;
    float: left;
}
div.body .container .images .list {
    float: left;
    overflow: hidden;
    vertical-align: top;
    width: 336px;
}
div.body .container .images .carousel {
    margin-bottom: 6px;
    margin-top: 8px;
    width: 336px;
}

Вот мой HTML;

<div class="images">
    <div id="images-previous">
        <img src="/images/images-previous.jpg" width="24" height="62" alt="Previous" />
    </div>
    <div class="list">
        <ul class="carousel">
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li> 
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>    
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <!--
            <cfset i=1>
                <cfloop condition="i lte images.recordcount">
                    <cfoutput>
                        <li>
                            <img src="#images.thumburl[i]#" width="44" height="44" alt="#images.alt[i]#" class="thumbnail" />
                            <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="#images.alt[i]#" class="over" />
                            <img src="/images/carousel-image-holder.png" width="49" height="48" alt="#images.alt[i]#" class="under" />
                        </li>
                    </cfoutput>
                    <cfset i=i+1>
                </cfloop>
            </cfset>
            -->
        </ul>
    </div>
    <div id="images-next">
        <img src="/images/images-next.jpg" width="24" height="62" alt="Next" />
    </div>
<div class="clear"></div>
css overflow html Даррен
источник
2
Есть ли что-нибудь против .listфиксированной высоты? Думаю, тогда это сработает.
Пекка
2
@Pekka, будет, я проверил. Предполагая , что правила CSS применяются ( так как HTML размещены здесь не показывает , div.bodyа .containerэлементы )
Gabriele Petrioli
1
Это не сработало. Он закрывает список, если список переполняется, а не скрывает его.
Даррен
1
Как у вашего <li>получилось горизонтальное расположение? Вы не показали нам CSS? Для чего это? Слайдер изображений?
Moin Zaman
1
Привет, ребята, оказывается, я не могу использовать горизонтальное меню, потому что плавающее или встроенное отображение всегда будет проливаться из-за родительской ширины. Я пробую стол сейчас, но это тоже боль.
Даррен

Ответы:

397

Хорошо, если у кого-то еще есть эта проблема, это может быть ваш ответ:

Если вы пытаетесь скрыть элементы с абсолютным позиционированием, убедитесь, что контейнер этих элементов с абсолютным позиционированием расположен относительно.

Даррен
источник
1
У меня была аналогичная проблема с относительно позиционированным содержимым в контейнере, и мне нужно было, чтобы контейнер был относительным. Таким образом, он не просто скрывает абсолютно позиционированные элементы, он скрывает любые позиционированные элементы, на которые он похож. :)
Крис
10
отлично - вот только это дебил. переполнение: скрыто должно быть скрыто. без абстрактной ссылки на документы может ли кто-нибудь предоставить вескую причину для выбора этого маршрута по сравнению с маршрутом, который имеет больше смысла?
user1873073 06
3
На самом деле нужно только позиционировать родительский элемент, что означает, что абсолютный и фиксированный также допустимы. В основном все, что не статично.
Райан Дженкинс
1
Отличный ответ, сработал и для моего сценария. В моем случае div с overflow: hidden имел атрибут position: relative. Добавление позиции: относительно ее родителя устранило проблему.
Anurag
74

Фактически...

Чтобы скрыть элемент с абсолютным позиционированием, контейнер position должен быть любым, кроме static. Может быть relativeили fixedв дополнение к absolute.

RW-nandemo
источник
1
Для всех, кто все еще может столкнуться с этой проблемой: staticнасколько я могу судить, ребенок должен иметь союзническую позицию. Установка и position:relativeдля родителя, и для потомка не работает.
Элвин Ван
6

В дополнение к предоставленным ответам:

похоже, что родительский элемент (тот, у которого overflow:hidden) не должен быть display:inline. Переход на display:inline-blockсработал для меня.

.outer {
  position: relative;
  border: 1px dotted black;
  padding: 5px;
  overflow: hidden;
}
.inner {
  position: absolute;
  left: 50%;
  margin-left: -20px;
  top: 70%;
  width: 40px;
  height: 80px;
  background: yellow;
}
<span class="outer">
  Some text
  <span class="inner"></span>
</span>
<span class="outer" style="display:inline-block;">
  Some text
  <span class="inner"></span>
</span>
Развернуть фрагмент

Милош Джаконович
источник
1
извините, это не имеет смысла, как вам удалось переполнить inline? также документация ясна: developer.mozilla.org/en-US/docs/Web/CSS/overflow, переполнение применяется только к блочному контейнеру,
Темани Афиф
1
Конечно, это имеет смысл. Попробуйте разместить абсолютный дочерний элемент с отрицательным смещением. Вы можете совершить такую ​​ошибку с встроенными по умолчанию элементами, такими как LI и SPAN,
Милош Чаконович
1
@TemaniAfif и Miloš akonović .. Это правильно, это inline-blockбудет или любой другой блок, такой как тип отображения, хотя в этом случае, когда элемент overflow: hiddenимеет float, он также работает с inlineэлементами.
Ason
1
когда вы добавляете абсолютную позицию, элемент становится блочным, поэтому здесь нет встроенных
строк
2
@LGSon, тогда давайте приведем ваш пример, но все еще не относящийся к этому вопросу .., вероятно, подойдет для другого вопроса.
Temani Afif
1

Очевидно, иногда также должны быть установлены свойства отображения родительского элемента элемента, содержащего материю, которая не должна перекрываться, например:overflow:hidden

<div style="overflow: hidden">
  <div style="overflow: hidden">some text that should not overflow<div>
</div>

Зачем? Понятия не имею, но у меня это сработало. См. Https://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565 (игнорируйте снайперский ход при stackoverflow!)

Чарльз Гудвин
источник
0

Это сработало для меня

<div style="display: flex; position: absolute; width: 100%;">
  <div style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
  </div>
</div>

Добавление position:absoluteв родительский контейнер заставило его работать.

PS: Это для всех, кто ищет решение для динамического усечения текста.

РЕДАКТИРОВАТЬ: Это должно было быть ответом на этот вопрос, но поскольку они связаны и могут помочь кому-то в этом вопросе, я также оставлю его здесь, а не удаляю.

YulePale
источник