Как его убрать?

Question

Дмитрий Ершов @Naamee

Кроткий текст

HTML
CSS

Как его убрать?

Как сделать так, чтобы вот это штука (не знаю как оно точно называется) который указан на скрине нельзя было перемешать направо или налево а просто прокручивать блок верх или вниз?

Вопрос задан более трёх лет назад
127 просмотров

6 комментариев

Подписаться 1 Простой 6 комментариев

Дмитрий Ершов @Naamee Автор вопроса

<!DOCTYPE  html>
<html>
    <head>
	    <title>block scroll</title>
		<meta charset="utf-8">
	</head>
	<body>
	    <style>
		  div{
	width: 600px;
	height: 400px;
	border:  1px solid #C0C0C0;
	background: #F1F1F1;
}
 .d:hover {
	width: 600px;
	height: 400px;
	border:  1px solid #C0C0C0;
	background: #F1F1F1;
	overflow:scroll;
}
		</style>
	<div class="d">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
	</body>
</html>

Написано более трёх лет назад

Дмитрий Локшин @Ddmitrich

<!DOCTYPE  html>
<html>
    <head>
      <title>block scroll</title>
    <meta charset="utf-8">
  </head>
  <body>
      <style>
      .d{
  width: 600px;
  height: 400px;
  border:  1px solid #C0C0C0;
  background: #F1F1F1;
  overflow-y: scroll;
  word-wrap: break-word;
  word-break: break-all;
}
    </style>
  <div class="d">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
  </body>
</html>

Написано более трёх лет назад

Mary Солнечная @MaryT

Прочитайте про overflow
Плюс у вас слово без пробелов, и выглядит оно должным образом - все в одну строчку

Написано более трёх лет назад
Дмитрий Ершов @Naamee Автор вопроса

Mary Солнечная, а нельзя изменить стиль этой прокрутки сделать его например меньше

Написано более трёх лет назад
Mary Солнечная @MaryT

Дмитрий Ершов, Нет. Чем длиннее слово, тем короче скролл. Чем меньше слово, тем он длиннее. Возможно это можно сделать с помощью кастомизации (в интернете куча js скриптов по скроллу) но лучше этого не делать

Написано более трёх лет назад
Дмитрий Ершов @Naamee Автор вопроса

Mary Солнечная, я просто хотел как вконтакте там просто он более узкий округленный

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

Пригласить эксперта

Ответы на вопрос 2

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

CSS

Простой
Поему не срабатывает стиль шрифта?
- 1 подписчик
- 20 окт.
- 131 просмотр
0

ответов
CSS

+1 ещё

Простой
Почему после изменений в css на сайте нет изменений?
- 1 подписчик
- 13 окт.
- 196 просмотров
3

ответа
CSS

Простой
Как выровнять в гриде по горизонтали?
- 1 подписчик
- 13 окт.
- 130 просмотров
1

ответ
HTML

+1 ещё

Простой
Как в руководстве steam сделать обтекающий картинку текст?
- 1 подписчик
- 08 окт.
- 124 просмотра
1

ответ
CSS

+2 ещё

Средний
Как решить проблему с появлением пустого пространства под drawer из shadcn?
- 2 подписчика
- 02 окт.
- 103 просмотра
1

ответ
HTML

+1 ещё

Средний
Скачал плагин image preview в вс коде, чтобы установить иконку сайта. Иконка появилась в браузере, но не появилась слева напротив строки. Почему так?
- 1 подписчик
- 30 сент.
- 146 просмотров
1

ответ
CSS

Простой
Как пофиксить визуальный глитч с border-radius и transparent + blur?
- 2 подписчика
- 26 сент.
- 154 просмотра
2

ответа
CSS

Простой
CSS3 как выбрать последние 4 элемента?
- 1 подписчик
- 25 сент.
- 207 просмотров
2

ответа
HTML

+1 ещё

Простой
От какой технической характеристики компьютера зависит скорость работы сайта, указанного ниже?
- 1 подписчик
- 24 сент.
- 451 просмотр
2

ответа
CSS

Простой
Как заставить css-variables перевычисляться?
- 1 подписчик
- 23 сент.
- 176 просмотров
1

ответ
Показать ещё Загружается…

Верстальщик / фронтендер для браузерного расширения

DevTeam.Space

от 1 000 до 2 000 $

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

Web-разработчик

ЭНДИ Консалтинг

от 40 000 до 40 000 ₽

<!DOCTYPE html> <html> <head> <title>block scroll</title> <meta charset="utf-8"> </head> <body> <style> div{ width: 600px; height: 400px; border: 1px solid #C0C0C0; background: #F1F1F1; } .d:hover { width: 600px; height: 400px; border: 1px solid #C0C0C0; background: #F1F1F1; overflow:scroll; } </style> <div class="d">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div> </body> </html>
<!DOCTYPE html> <html> <head> <title>block scroll</title> <meta charset="utf-8"> </head> <body> <style> .d{ width: 600px; height: 400px; border: 1px solid #C0C0C0; background: #F1F1F1; overflow-y: scroll; word-wrap: break-word; word-break: break-all; } </style> <div class="d">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div> </body> </html>
Прочитайте про overflow
Плюс у вас слово без пробелов, и выглядит оно должным образом - все в одну строчку
Mary Солнечная, а нельзя изменить стиль этой прокрутки сделать его например меньше
Дмитрий Ершов, Нет. Чем длиннее слово, тем короче скролл. Чем меньше слово, тем он длиннее. Возможно это можно сделать с помощью кастомизации (в интернете куча js скриптов по скроллу) но лучше этого не делать
Mary Солнечная, я просто хотел как вконтакте там просто он более узкий округленный

Answer 1 · 2017-11-18 22:00:17

Петя Персианов @Dr0nk

Junior Android Developer

htmlbook.ru/css/overflow-x

overflow-x: hidden;

Ответ написан более трёх лет назад

Комментировать

Answer 2 · 2017-11-18 22:49:10

Не рекомендую использовать в данном конкретном случае overflow-x: hidden. Лучшим решением будет воспользоваться свойством word-wrap: break-word - перенос длинного слова на новую строку. Таким образом, ваш контент не будет вылазить за пределы блока даже при экстремальных случаях. Использование overflow-x банально обрежет часть слова, выходящую за пределы блока, что на практике даст негативный результат.

Яркий пример с использованием слова Тетрагидропиранилциклопентилтетрагидропиридопиридиновые, обрезка которого заставит контент потерять смысл.

Как его убрать?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт