2

Споткнулся о следующее поведение параметра overflow:

Если значение overflow-x любое кроме initial, inherit, или unset то значение overflow-y уже не будет прежним, а поменяться на auto.

Это мне очень сильно жизнь подпортило, если кто знает, что можно тут придумать говорите не молчите :)

Ссылка на CodePen

* {
  box-sizing: border-box;
}

#one td, #two td {
  max-width: 100px;
  height: 30px;
  padding: 17px 10px;
  border: solid 1px black;
  position: relative;
  background: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
  overflow-y: hidden;
}

#table td:hover {
  overflow-x: overlay;
  text-overflow: initial;
}

td::after {
  content: "";
  width: 99px;
  height: 10px;
  background: red;
  position: absolute;
  left: -1px;
  bottom: -7px;
  cursor: n-resize;
  z-index: 999;
}

#one td {
  z-index: 2;
}

#two td {
  z-index: 1;
}
<table id="table">
  <tr id="one">
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, eligendi?</td>
  </tr>
  <tr id="two">
    <td>two</td>
  </tr>
</table>

Красная полоска подразумевается для resize'a ячеек и нужно разкомментировать overflow чтобы понять суть проблемы.

2 ответа 2

2

Из вопроса совершенно непонятно, что ты хочешь сделать, так что только про overflow.

visible может быть только одновременно по двум осям. Если хотя бы по одной из них ты ставишь что-то другое, то в такой комбинации оно работать не будет. Весьма вероятно, что в такой ситуации вместо visible используется auto. Однако, можно как угодно комбинировать scroll, hidden, auto и даже overlay, который снова поддерживается хромом.

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

1
  • @Vasily, @Qwertiy♦, да, вот этого я и боялся что здесь ничего нельзя поделать и придётся менять структуру, там просто тонна кода с логикой на d3 с этими таблицами написано и придётся вникать, спасибо ребят :) 18 июл 2020 в 20:32
1

Дефолтное значение параметра overflow это visible, независимо от того используете ли Вы overflow-x, overflow-y, или просто overflow.

Значение overlay из Вашего примера не стандартизировано и официально поддерживается только Webkit браузерами.

Если Вы испытываете некорректное поведение данного параметра с определенным(и) браузерам(и), то стоит указывать требуемое Вам значение explicitly.

Пример использования:

div {
   overflow-x: hidden;
   overflow-y: scroll;
}
3
  • Ещё overflow принимает два параметра overflow: overflow-x overflow-y.
    – De.Minov
    18 июл 2020 в 4:25
  • @Vasily, спасибо за интерес и потраченное время на мою задачу. В предложенном Вами решении, пропадает красная полоска, которая предназначена для resize'а. А в ней и в скроллинге не поместившегося текста в ячейку. Даже сейчас дополню ховерами, чтобы было красиво 18 июл 2020 в 19:56
  • 1
    @ Yoba Fighter Я поправил свой ответ, более точно указав я всего лишь привел пример указания обоих параметров. Что бы не быть уверенным в требуемом Вам результате, я, как и в своем ответе, рекомендую прописывать оба параметра даже если Вам нужно изменить только один.
    – Vasily
    18 июл 2020 в 20:08

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.