Jump to content
  • 0

Горизонтальная прокрутка (white-space)


Velidan
 Share

Question

Доброго дня уважаемое сообщество. Столкнулся с неприятным нюансом и очень нужна помощь.

 

https://jsfiddle.net/96o200ds/2/

 

Для горизонтальной прокрутки у меня блок .overview имеет white-space: nowrap; (Потому что если не поставить так, тогда горизонтальная прокрутка не появится, а контент будет идти себе по высоте вниз).

 

Выставить четкую ширину (например: 2000px ) я не могу, так как ширина контента динамическая. 

 

 

Проблема в том, что контент не хочет выстраиваться на всю высоту и идти себе по ширине дальше, за границы видимого блока, а выстраивается в одну строчку.

 

Можно ли сделать так, чтобы контент заполнял всю высоту и дальше выстраивался себе в ширину?

 

П.С. Можно, конечно, на js при загрузке страницы вычислить ширину контента и назначить такую, но хотелось бы на css все сделать.

 

Буду благодарен за любую помощь.

Edited by Velidan
Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Хорошо, я это понимаю. Спасибо. Только я спрашивал, а как можно сделать так, чтобы контент заполнял всю допустимую высоту и при этом тянулся в ширину без её явного указания  в явных величинах?

Link to comment
Share on other sites

  • 0

Хорошо, я это понимаю. Спасибо. Только я спрашивал, а как можно сделать так, чтобы контент заполнял всю допустимую высоту и при этом тянулся в ширину без её явного указания  в явных величинах?

А попробуйте для .scrollBox задать свойства justify-content, align-items, align-content, у него же указазан display:flex;

Не знаю только, поможет ли это, сама начала использовать flex недавно, но надеюсь, что хоть немного помогла

Link to comment
Share on other sites

  • 0
Это как?

Сейчас дошло. Вероятно ТС хочет, чтобы, допустим, по высоте влезает 4 полные строки, соответственно текст разбивается на эти 4 строки +/- равные по ширине строки. Т.о. получаем горизонтальный скролл.

 

ИМХО без js не сделаешь, если только <br> вручную использовать 

Link to comment
Share on other sites

  • 0

Да, именно это я и хотел сделать. 

Очень жаль, хотелось средствами css это провернуть. Ведь если все по y - тогда по полной ширине текст прекрасно заполняется и тянется в высоту сколько ему нужно.

 

Очень жаль, что по оси x   так не получается. Как-то странно выходит. Почему бы не сделать и для горизонтали такую возможность.

 

 

Алёна Стрелкова  Спасибо за помощь, но это не совсем то что мне нужно, указанные вами свойства влияют на позиционирование дочерних элементов/контента внутри flex-контейнера. Но не влияют на заполненность текста при горизонтальном скроле без явно заданной ширины.

Edited by Velidan
Link to comment
Share on other sites

  • 0
Алёна Стрелкова  Спасибо за помощь, но это не совсем то что мне нужно, указанные вами свойства влияют на позиционирование контента внутри flex-контейнера. Но не влияют на заполненность текста при горизонтальном скроле без явно заданной высоты.

 

Да, я просто не правильно поняла вопрос и потому в очередной раз не смогла помочь:)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By CreamQ
      Вопрос в следующем: 
      При нажатии на кнопку создается элемент "entireDrink ", в который добавляется input-картинка и span-текст, "entireDrink " получает тег "one" в котором указан параметр "White-space:  nowrap;". При повторном нажатии на ту же кнопку меняется span-текст, а при нажатии на другую добавляется еще один такой же элемент и т.д.
      Мне надо, чтобы в окне div эти элементы переносились на новую строку, но не разделялась картинка с текстом, а получается, что "entireDrink "s просто множатся по оси-x.
      Если добавлять без White-space:  nowrap, то все элементы переносятся отдельно: картинки и тексты.
      В другом месте, созданном заранее в html это работает, т.е. узлы с тегом "one" переносятся на новую строку сразу со всем содержимым.
      Помогите, пожалуйста, разобраться. Заранее спасибо.
      Ниже на скриншотах: 1) заполнение без "White-space:  nowrap;" 2) С "White-space:  nowrap;"
      Вот кусок кода: 
       
    • By Denzil
      Здравствуйте, друзья!
      Подскажите, пожалуйста, как сделать так, чтобы высота страницы (например вот этой - http://toolbird.com/signup/)отображалась на любом десктопном устройстве тютелька-в-тютельку под размер экрана, без скроллинга.
      Речь идет о верстке в Bootstrap3, но с благодарностью приму и другие возможные решения.
       
      Спасибо большое!
    • By TheZimbabve
      Доброго времени суток. 
       
      http://barab.esy.es/# Вот ссылочка на обычный html/css+javascript сайт. Проблема. Не равняется два блока: "наша миссия" и слайдер околече.
       
      Хочется, чтобы на одной высоте были. Как исправить не знаю.  
    • By seregamurman
      Привет всем!
      Ребят, помогите решить задачу!!!
      Есть сайт sledd.ru. Он завёрнут в блок (блок-тень), которому задана тень, его высота 100%. Основной блок (main-cont) имеет высоту min-height:100%. Подвал прижат книзу.
      При переходе на страницу с большим количеством контента (допустим http://sledd.ru/products/screens/outdoor/gt6-osx.html ), тень доходит до того места, где у блока "блок-тень" заканчивается 100%, дальше тени нет!
      Как можно правильно реализовать тень по всей высоте, при том, что сайт должен открываться на всю высоту экрана с прижатым футером??? 
    • By Ludwig Voltman
      Сейчас верстаю форму поиска и никак не могу понять, как рассчитывается высота.
      http://jsfiddle.net/ludwigwoltmann/68jQT/2/
      По макету высота текстового поля и кнопки должна быть 29px. Кнопка и текстовое поле должны располагаться на одной линии. Я задаю фиксированную высоту в 27px (с учетом верхней и нижней границы в 1px), в результате -- высота поля -- 31px, высота кнопки -- 27px. Не понимаю...
      Сначала думал что это из-за шрифтов - но изменение их размеров и межстрочного интервала ничего не дает.
      Подскажите пожалуйста, как решить проблему?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy