Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML: How to create a DIV with only vertical scroll-bars for long paragraphs?

Tags:

html

css

overflow

Use overflow-y. This property is CSS 3.


to hide the horizontal scrollbars, you can set overflow-x to hidden, like this:

overflow-x: hidden;

You need to specify the width and height in px:

width: 10px; height: 10px;

In addition, you can use overflow: auto; to prevent the horizontal scrollbar from showing.

Therefore, you may want to try the following:

<div style="width:100px; height:100px; overflow: auto;" >
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
</div>

Thank you first

Use overflow:auto it works for me.

horizontal scroll bar disappears.


For any case set overflow-x to hidden and I prefer to set max-height in order to limit the expansion of the height of the div. Your code should looks like this:

overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;

To show vertical scroll bar in your div you need to add

height: 100px;   
overflow-y : scroll;

or

height: 100px; 
overflow-y : auto;

overflow-y : scroll;
overflow-x : hidden;

height is optional