Vertical overflow on text load

Question

I've been working on a div and I am now working on the html/css part in order to complete the styling; After that I will work on the php part to load the text inside the div from a database;
The div:

HTML:

<div class="descriereapostarii">
 wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
</div>

Over here you can see my problem, my div acts exactly like this code block of HTML above, I don't want that(horizontal overflow) I want the div to overflow vertical.
(over here I have 250 characters, that's because the maximum accepted limit will be 250 when to user writes a description)

CSS:

.descriereapostarii{
padding:1px;
float:left;
position:relative;
border:1px solid #00A800;
height:80px;
width:460px;
overflow:auto;}

The problem:
When the page loads I want to content inside the div to scroll only vertical with respect to the size of the actual div, similar to the this post box when you write your description to a question on stackoverflow, It only overflows vertical not horizontal, I want to do the same thing with my div, any ideas?

It's gonna be a bit hard to break the text on multiple lines if there's no blank spaces - ie: single word. — emerson.marini, Feb 16 '16 at 08:39
Possible duplicate of http://stackoverflow.com/questions/2566290/html-how-to-create-a-div-with-only-vertical-scroll-bars-for-long-paragraphs — RononDex, Feb 16 '16 at 08:40
@RononDex it's not the same thing , that guy has the text broken in pieces and the text is limited on a specific number or characters/line, it's like he made it show like that, when I will have text from 1-250 characters in one line, and I am trying to make it so that it overflows vertically ;) — 21scripting, Feb 16 '16 at 08:43

score 1 · Accepted Answer · answered Feb 16 '16 at 08:44

1

Use this for your div :

word-wrap: break-word;

Demo :

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

answered Feb 16 '16 at 08:44

Jurion

1,230
11
18

score 0 · Answer 2 · answered Feb 16 '16 at 08:40

0

Add this css to disable vertical scroll:

overflow-x: hidden;

answered Feb 16 '16 at 08:40

Ayoub Abid

432
5
15

It hides the overflow and the text still goes outside the div :( – 21scripting Feb 16 '16 at 08:44

Asons · Answer 3 · 2016-02-16T08:55:08.817

And if you need to break lines within words, use word-break: break-word;

Note: For Chinese, Japanese, and Korean text, you might need word-break as word-wrap will not work in some cases.

.descriereapostarii{
  padding:1px;
  float:left;
  position:relative;
  border:1px solid #00A800;
  height:80px;
  width:460px;
  overflow:auto;
  word-break: break-word;
}

<div class="descriereapostarii">
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
</div>

Vertical overflow on text load

3 Answers3