Як змусити властивість переповнення 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щоб дати фіксовану висоту? Я думаю, тоді це спрацювало б.
— Pekka
2
@Pekka, це буде, я перевірив. Якщо припустити, що застосовуються правила CSS ( тому що розміщений тут HTML не містить елементів div.bodyта .containerелементів )
— Gabriele Petrioli
1
Це не спрацювало. Він перекриває список, якщо список переповнюється замість того, щоб приховувати його.
— Даррен
1
Як у вас <li>вийшов горизонтальний макет? Ви пропустили показ нам CSS? Для чого саме це? Слайдер зображення?
— Moin Zaman
1
Привіт, хлопці, виявляється, я не можу використовувати горизонтальне меню, оскільки плаваючий або вбудований дисплей завжди буде розливатися через батьківську ширину. Я зараз пробую стіл, але це також біль.
— Даррен

Відповіді:

397

Гаразд, якщо хтось ще має цю проблему, це може бути ваша відповідь:

Якщо ви намагаєтесь приховати абсолютні позиціоновані елементи, переконайтесь, що контейнер цих абсолютних розміщених елементів розташований відносно.

— Даррен
джерело
1
У мене була схожа проблема з відносно розміщеним вмістом у контейнері, і мені потрібен був контейнер також відносний. Таким чином, він не просто приховує абсолютно розташовані елементи, він приховує будь-які позиціоновані елементи, як він виглядає. :)
— Кріс
10
чудово - хіба що це дивно. переповнення: приховано слід приховати. без абстрактних посилань на документи може хтось надати вагому причину вибору цього маршруту проти маршруту, який має більше сенсу?
— користувач1873073
3
Насправді батьківський елемент повинен бути розміщений лише, а це означає, що абсолютні та фіксовані також є дійсними. В основному все, що не є статичним.
— Райан Дженкінс
1
Чудова відповідь, працював і для мого сценарію. У моєму випадку, div з переповненням: приховано мав позицію: відносний атрибут. Додавання позиції: відносно свого батьківського виправленого питання.
— Анураг
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
Вибачте, це не має сенсу, як вам вдалося переповнити вбудований текст? також документація зрозуміла: developer.mozilla.org/en-US/docs/Web/CSS/overflow переповнення застосовується лише до блоку контейнерів
— Temani Afif
1
Звичайно, це має сенс. Спробуйте встановити абсолютний дочірні елемент з від’ємним зміщенням. Ви можете помилитися з вбудованими елементами за замовчуванням, такими як LI та SPAN
— Miloš Đakonović,
1
@TemaniAfif та Miloš Đakonović .. Це правильно, це inline-blockбуде або будь-який інший блок типу типу відображення, хоча в цьому випадку, де елемент overflow: hiddenмає float, він також працює на inlineелементи.
— Асон
1
коли ви додаєте позицію абсолютної, елемент стає блоковим елементом, тому тут немає жодної
— інлінії
2
@LGSon давайте подавати ваш приклад, але все-таки не має відношення до цього питання. Мабуть, це має відповідати іншому питанню.
— Темані Афіф
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: Це для тих, хто шукає рішення для динамічного скорочення тексту.

EDIT: Це мало бути відповіддю на це питання, але оскільки вони пов'язані, і це могло б допомогти комусь у цьому питанні, я також залишу його тут, а не видаляти.

— YulePale
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.