Почему не работает overflow hidden на планшете
у меня есть ячейка таблицы, которую я всегда хотел бы иметь определенной ширины. Однако, он не работает с большими струны нерегулируемые текст. Вот тестовый пример:
Как я могу получить текст, который будет отрезан на краю поля, а не с расширением поля?
необходимо указать table-layout:fixed и соответствующая ширина на элементе таблицы, так же, как overflow:hidden и white-space: nowrap на ячейках таблицы.
8 Answers 8
Ran into the same problem, applying an overflow-x: hidden to the html and body didn't do anything in Android. Put a container div inside your body and have that wrap everything on the page. Add an overflow-x: hidden to that container div and the problem is solved.
This seems to work with the search bar but does not work with the navigation menu. Once the nav is toggled the right side of the page becomes scrollable. I also used relative instead of absolute, tried both, since the wrapper can not be absolutely positioned.
We have been struggling with the same issue with my friend (as it turns out, @user3310612 :)) at work for the last couple of days. Absolutelly couldn't understand why EVERY way of moving the menu right (especially transform, which should not affect layout) made the page scrollable right on Android.
Today after seeing the posts that overflow-x doesn't work on Android, I just randomly asked "What happens if you use just overflow:hidden . Expectations — right menu clipped, but probably also cripled page and broken up/down scrolling. Reality — works flawlessly.
No, and maybe because of this on the desktop the demo menus are too short (shorter than the window) if the page is not long enough (this doesn't affect mobile). I was thinking about adding a trick like min-height: 100% or min-height: 100vh somewhere.
I could give it a try but I just ended up redoing how the setup is since my work is rushing this. I also am pretty sure when I tried overflow: hidden; it broke the layout but at least I have old files to test on!
PS. The live example doesn't show me any kind of right menu and doesn't reproduce the problem, unfortunately. Opening JSFiddle on a smartphone doesn't show this problem as well, but maybe it's because the preview panel is an iFrame.
фиксированные и жидкие столбцы ширины
ширина для таблицы должен быть установлен, но любая дополнительная ширина просто принимается жидкой ячейкой (ячейками).
С несколькими столбцами фиксированной ширины и жидкости ширина:
это просто так, как TD. Я считаю, что это может быть потому, что свойство "display" элемента TD по своей сути установлено в "table-cell", а не "block".
в вашем случае альтернативой может быть обернуть содержимое TD в DIV и применить ширину и переполнение к DIV.
могут быть некоторые проблемы с заполнением или cellpadding, и вам лучше удалить встроенные стили и использовать внешний css вместо этого, но это должно быть начать.
применить CSS table-layout:fixed; (и иногда width: ) и white-space: nowrap; overflow: hidden; стиль на TD. Затем установите ширину CSS на правильно ячейки или столбца элементов.
важно отметить, что ширина столбцов таблицы фиксированной компоновки определяется шириной ячеек в первой строке таблицы. Если в первой строке есть элементы TH, а ширины применяются к TD (а не TH), то ширина применяется только к содержимому TD( пробел и переполнение могут игнорироваться); таблица столбцы будут распределяться равномерно независимо от заданной ширины TD (поскольку в первой строке не указано [на TH]), а столбцы будут иметь [вычисленные] равные ширины; таблица не будет пересчитывать ширину столбца на основе ширины TD в последующих строках. Задайте ширину первых элементов ячейки, с которыми столкнется таблица.
альтернативно, и самый безопасный способ установить ширину столбца-использовать и теги в таблице с шириной CSS, установленной на каждой фиксированной ширине Кол. CSS, связанный с шириной ячейки, играет лучше, когда таблица заранее знает ширину столбца.
Я не знаком с конкретной проблемой, но вы можете вставить div и т. д. Внутри td и установить переполнение на этом.
Ну вот решение для вас, но я действительно не понимаю, почему это работает:
а именно, упаковка содержимого ячейки в div.
вам нужно будет установить атрибуты стиля таблицы: width и table-layout: fixed; чтобы атрибут' overflow: hidden; ' работал правильно.
Imo это работает лучше, чем с помощью divs с width атрибут стиля, особенно при использовании его для динамических вычислений изменения размера, таблица будет иметь более простой DOM, который упрощает манипуляции, потому что исправления для заполнения и маржи не требуются
в качестве дополнительного, вам не нужно устанавливать ширину для всех ячеек, но только для ячеек в первом ряду.
лучшее решение-поместить div в ячейку таблицы с нулевой шириной. Ячейки таблицы Tbody наследуют свою ширину от ширины, определенной thead. Позиция: относительная и отрицательная маржа должны сделать трюк!
Примечание что
чтобы сделать более простым я предлагаю поместить textarea внутри td который автоматически управляет переполнением
Чтоб протянуть фон блока за пределы центрального контейнера использую такую конструкцию.
Это прекрасно работает на десктопе, но на мобильных прокрутка не исчезает.
В чём проблема?
- Вопрос задан более трёх лет назад
- 3534 просмотра
Мобильные браузеры игнорируют overflow-x:hidden для html и body при использовании
Проблема решается добавлением этого свойства отдельным секциям.
Так же, при установке не срабатывает:
Но при установке совместно с html - неожиданно сработало
overflov-x:hidden - синтаксическая ошибка overflow и еще может мобильный браузер не знать overflow-x и еще используй просто
или смотря какую ширину нужно
Ошибка случайная, в коде её нет.
С overflow: hidden пропадёт вертикальная прокрутка, что недопустимо.
SexyMonkey:
Не совсем. overflow: hidden отображает содержания блочного элемента, если оно целиком не помещается и выходит за область ЗАДАННЫХ размеров. то есть если height auto или ваще не задан что равносильно auto и скрывать не будет, а вот в ширину заданную в 100% все что будет сверх 100 обрежет или скроет как удобно
При просмотре в браузере настольного компьютера черная строка меню правильно распространяется только до края окна, поскольку body имеет overflow-x:hidden .
В любом мобильном браузере, будь то Android или iOS, черная строка меню отображается во всю ширину, что приводит к появлению пробелов в правой части страницы. Насколько я могу судить, этот пробел даже не является частью тегов html или body .
Даже если я установил для области просмотра определенную ширину в :
Сайт расширяется до 1100 пикселей, но все еще имеет пробел, превышающий 1100 пикселей.
Что мне не хватает? Как мне сохранить размер окна просмотра до 1100 и отключить переполнение?
Создание div-оболочки сайта внутри и применение overflow-x:hidden к оболочке вместо или устраняет проблему.
Оказывается , что браузеры , которые анализируют в тег просто игнорировать overflow на атрибуты html и body тегах.
Примечание: вам также может потребоваться добавить position: relative в оболочку div.
Я обнаружил , что в дополнение к установив overflow для hidden , я должен был установить , position чтобы fixed .
Я попробовал, я поместил весь свой код в div и дал ему overflow-x: hidden, но не работает, я добавляю тоже, но ничего не изменилось: / любые идеи?
@leepowers overflow-x: hidden все еще не работает у меня даже после того, как я добавлю этот метатег. Не могли бы вы поделиться ссылкой на ваш сайт, где он работает?
Извините, что у вас не получилось. Прежде чем я ответил, я быстро протестировал ваш сайт и применил свое предложение к вашему CSS. По крайней мере, проблема исправлена для стандартного браузера и браузера дельфинов на моем телефоне Android.
Работал у меня. eduardd.eu/projects/ezo (в нижнем колонтитуле от 480 до 992 пикселей возникла проблема с переполненным изображением женщины и полотенец)
Также необходимо добавить height:100%; , иначе вертикальная прокрутка не будет работать должным образом на страницах с загружаемыми изображениями (которые увеличивают высоту страницы).
Комментарий VictorS к принятому ответу заслуживает того, чтобы быть его собственным ответом, потому что это очень элегантное решение, которое действительно работает. И добавлю немного полезности.
Виктор отмечает добавление position:fixed работ.
И это действительно так. Тем не менее, у него также есть небольшой побочный эффект, связанный с прокруткой вверх. position:absolute решает эту проблему, но вновь вводит возможность прокрутки на мобильном устройстве.
Я также добавляю это, чтобы основная страница не прыгала влево / вправо при отображении / скрытии модальных окон.
Что сработало для меня, так это поворот элемента, который должен был быть скрыт путем переполнения, из position: absolute в position: fixed. К счастью.
@WraithKenny - Если вы хотите, чтобы страница не перескакивала вверх на мобильном устройстве, вы можете использовать следующий хакерский / уродливый подход. Внутри вашей модальной функции убедитесь, что вы получили текущее смещение прокрутки, прежде чем что-либо делать, чем применять модальный стиль вместе, а также установить верхний край вашего тела, равный минусу текущего смещения. Убедитесь, что при удалении модального окна вы установили поле обратно на 0 и прокрутите страницу до исходного смещения.
Это решение работает только в том случае, если содержимое вашего модального окна умещается на экране, т.е. вам не нужно прокручивать сам модальный экран.
На моей странице также есть другие фиксированные и абсолютные элементы. Заставляя тело position:fixed or absolute менять свое положение, тоже. Не подходит / работает в моем случае :(
Это самое простое решение проблемы горизонтальной прокрутки в Safari.
Нет, наконец-то не сработало. В итоге я сделал математику и убедился, что div не шире, чем разрешено, css calc () мне очень помог, поскольку он позволяет смешивать относительную ширину (vw или%) и абсолютную ширину (px).
Конечно, это своего рода обходной путь. Где-то еще что-то переливается, сейчас просто отрезано. Попробуйте добавить правило css: * <контур: сплошной красный 1px; >Если вы все еще не можете найти переполняющийся элемент, возможно, это связано с каким-то запасом. Попробуйте добавить * и посмотрите, исчезнет ли переполнение.контур:>
Не могу поверить, что это все еще проблема в 2019 году. Но вышеприведенное решение полностью сработало. Спасибо.
Как утверждает @Indigenuity, это, по-видимому, вызвано тем, что браузеры анализируют тег.
Чтобы решить эту проблему в источнике, попробуйте следующее:
В моих тестах это не позволяет пользователю уменьшать масштаб для просмотра переполненного содержимого и, как результат, также предотвращает панорамирование / прокрутку к нему.
Добавление initial-scale=1 к существующему метатегу области просмотра действительно решает проблему. Благодарность!
Это то, что на самом деле сработало у меня после того, как я попробовал все остальное. Большое спасибо !
работает на iOS9
Это действительно работает, но установка position: fixed на вашем теле заставляет вас прокручивать вверх
Не трогайте область просмотра:
При настройке на 10 padding пикселей, конечно, левое меню остается к краю панели, вы можете поместить оставшиеся 40 пикселей на каждую из них li , по 20 пикселей с каждой стороны слева и справа:
Когда вы уменьшите размер браузера, вы все равно найдете белый фон: поместите текстуру фона вместо вашего div в body . Или, как вариант, отрегулируйте ширину меню навигации от 100% до более низкого значения с помощью медиа-запросов. Чтобы создать правильный макет, необходимо внести множество изменений в ваш код, я не уверен, что вы собираетесь делать, но приведенный выше код каким-то образом исправит вашу переполненную панель.
Создание div-оболочки сайта внутри тела и применение overflow-> x: hidden к оболочке INSTEAD тела или html устранило проблему.
Это сработало для меня после добавления position: relative в оболочку.
Это сработало для меня. Побочным эффектом было то, что у меня две полосы прокрутки вместо одной. Решением было сделать это overflow: hidden вместо overflow-x: hidden . Работает на мобильных Safari, Chrome, IE11 на OSX и Win.
Добавление обертки вокруг всего вашего контента действительно сработает. Хотя семантически "неприглядно", я добавил div с классом overflowWrap прямо внутри body тега, а затем установил свой CSS следующим образом:
Имеет ли overflow:hidden применяться к работы на iPhone Safari? Вроде нет. Я не могу создать оболочку для всего сайта, чтобы добиться этого .
Вы знаете решение?
Пример: у меня длинная страница, и я просто хочу скрыть содержимое, которое находится под «сгибом», и это должно работать на iPhone / iPad.
У меня была аналогичная проблема, и я обнаружил, что применился overflow: hidden; к обоим html и body решил мою проблему.
Для iOS 9 вам может потребоваться использовать это вместо: (Спасибо, chaenu!)
У меня это не работает на iOS 9, Safari. Тело все еще можно прокручивать, даже после добавления position: relative .
THANK. ТЫ. У меня была большая проблема, когда элементы переходили из-за пределов области просмотра внутрь. Произошла странная ошибка, при которой контент был расширен. Это было решение для меня!
Угу, это сработало. Я создаю сайт, на котором они хотят, чтобы мобильная навигация просматривала контент, но когда он открывается, контент за навигацией в фоновом режиме все равно прокручивается. Другие ответы с положением, переполнением и высотой также работали, но с высотой страница перескакивает вверх, когда я открываю навигацию. Я предполагаю, что это уникально для моей ситуации, но просто подумал, что упомяну об этом, если у кого-то еще с наложенной навигацией будет такая же проблема.
Добавление фиксированного положения делает решение этот вопрос, но это делает страницу скачок к вершине, что плохо для UX , если вы реализуете это в фоновом режиме , в то время как вы представите меню или модальный. Чтобы создать хороший UX, вы должны перед блокировкой позиции сохранить позицию прокрутки страницы, а затем повторно применить ее после разблокировки.
Это хорошо (в моем случае работает лучше position: relative ), однако позиция прокрутки теряется после восстановления стиля по умолчанию (например, закрытия меню).
Для позиции прокрутки вы можете использовать js (jquery в этом примере), сделайте что-то вроде этого: // on menu open // save window pos $('body').attr( 'data-pos', $(window).scrollTop() ) ; // . // on menu close // scroll to saved window pos $( window ).scrollTop( $('body').attr( 'data-pos' ) );
I have come to the conclusion that this is an android only problem, being caused by how my navigation menu works, and am running out of ideas to try. The menu is pushed 100% from the left to hide the menu. I am then using css transitions to have the menu slide out from the right side to 80% of the window. Once the menu is toggled it is leaving an open and empty space to the right side where the menu is hiding. I can't use display: none; since it will kill the animation. Important The problem only happens once the menu is toggled.
overflow on the body, html, wrapper, .searchCont, and more.
Update 2/6/2014
Here is the navigation menu css:
End update
Here is the css:
Finally, here is a fiddle/live site: Demo-fiddle/Demo-live-site
Here is an image of what the problem looks like:
I've played width your page with iOS7. I don't see an issue with overflow right away. What can I do to reproduce the problem?
The problem happens once you toggle the navigation or search button. I have only tested on my driod but once I'm at home I can test it on my old iphone.
Looks fine for me under ios so far. I can not provide help for android atm. I'll upvote your question.
@NicoO I have added an image to show how it looks. I have checked on chrome, firefox, and samsung browser which all display it the same, it could be an android only problem.
Clicked, pinshed, dragged and used every slide toggle option. Works solid with ios. You should really Focus at the android browser for research
примеры
фиксированная ширина столбцов
ширина таблицы должна быть одинаковой(или меньше), чем ячейка (ячейки) фиксированной ширины.
С фиксированной шириной колонка:
с несколькими столбцами фиксированной ширины:
Читайте также: