Форум

.Nikita · #1 (**permalink**) 05.02.2014, 16:39

Приветствую всех.

Ситуация следующая.

Имеется div в котором
<ul>
<li>1</li>
<li>2</li>
...
<li>N</li>
</ul>

Теги li выводятся горизонтально посредством применения к ним css
то есть примерно так: 1 2 .. N
Естественно что ширина div ограничена и если элементы li не помещаются во всю ширину div то происходит перенос их на новую строку ниже. Нужно отследить этот перенос с целью скрывать не умещающиеся в одну строку (далее будет реализована прокрутка их, чтобы теги li были все в одной строке)

как быть?

DeUM · #2 (**permalink**) 05.02.2014, 19:28

Установить высоту и ширину, и скрывать всё не помещающееся.

width: 9999999px;  /* Устанавливаем ширину... */
height: 9999999px; /* и высоту... */
overflow: hidden;   /*  ...и скрываем всё не помещающееся. ()также можно посмотреть overflow-x и overflow-y */

.Nikita · #3 (**permalink**) 05.02.2014, 21:00

Ширина div у меня ограничена половиной экрана. С параметром overflow: hidden экспериментировал, получилось что часть элемента уходящего за границу div всё же видна. И не понятно как в таком виде отследить событие чтобы повесить на него функцию.

рони · #4 (**permalink**) 05.02.2014, 21:09

.Nikita,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  div{
    width: 200px;
    overflow: hidden;
    border: 5px solid #FF0000;

  }
  li{
    margin: 0px;
    float: left;
    width: 70px;
    background: #228B22;

  }
  ul{
    margin: 0px;
    display: block;
    width: 280px;
  }

  </style>
</head>

<body>
<div>
<ul>
 <li>1</li>
 <li>2</li>
 <li>...</li>
 <li>N</li>
 </ul>
 </div>
</body>

</html>

.Nikita · #5 (**permalink**) 06.02.2014, 19:01

Дело в том что текст в li будет переменной длины (те самые li я добавляю в документ динамически), поэтому параметр width: 70px; не корректен.

Есть ли способ добавить прокрутку в div не вертикальную а горизонтальную?

У меня overflow:auto , когда добавляемые элементы упираются в нижний край вылазит вертикальная полоса прокрутки. Есть ли возможность чтобы добавляемые элементы не переносились на новую строку и добавлялась горизонтальная полоса прокрутки у родительского div/

Sanda · #6 (**permalink**) 08.02.2014, 23:11

white-space со значением no-wrap на li-элементы должно помочь от переноса на новую строку. Дальше, как уже сказали, overflow-y: auto для контейнера.

.Nikita · #7 (**permalink**) 25.02.2014, 22:32

Спасибо.

Форум

Справочник

Discord чат

Курсы javascript