Hỏi về CSS: Cố định layout khi tràn Text

[tindecken]

mình có câu hỏi này muốn hỏi:

-- tôi dùng div để tạo ra 1 layout với width và height chỉ định. Nhưng khi gõ Text nhiều thì nó tràn ra cả layout mà đã định width và height, làm thế nào để cho khi gõ nhiều text thì nó tự động xuống hàng vậy (ở đây nó nằm trên 1 hàng và làm bể layout luôn).

Thanks.

[2_lua_IT]

Chưa biết code CSS bạn viết như thế nào nên kô thể kết luận được là do đâu. Thông thường thì width thì OK rồi, còn height thì kô cần thiết cho text, vì text tự động giãn. Tôi sợ là bạn type text mà kô có khoảng trắng, mà text này có width lớn width của div thì tràn thôi. Goolucks bro.

[lazyCoder]

có 1 số trường hợp text đánh liền, vd: aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
nó sẽ bị break.

giải pháp: cho thêm: overflow vào cái div chứa text.
******
html
<div id="content">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

css
#content { width:50px; overflow:hidden; }

nếu hidden thì che đi phần thừa, set = scroll thì sẽ thành scrollable div, còn auto thì nó tự động xác định.

good luck

[tindecken]

mình đã làm được rồi, thanks mọi người nhiều.

[lazyCoder]

u are welcome, baby hehe

[2_lua_IT]

<div id="content">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>, text thừa ra sẽ bị che hết, chỉ vừa đủ cái width thôi nếu không có space giống vậy. Mà trên thế giới này làm j có từ khủng khiếp thế, hihi

[lamthien]

Đúng là không có từ nào dài vậy nhưng nếu nó là cái gì đó tương tự cái này thì sao hả bạn: http://www.google.com.vn/search?hl=vi&client=firefox-a&channel=s&rls=org.mozilla%3Aen-US%3Aofficial&hs=zuL&q=hehe+haha+hoho&btnG=T%C3%ACm+ki%E1%BA%BFm&meta=
giải pháp cho overflow = hidden có lẽ là hợp lý nhất

[phongjalvn]

Chờ CSS3 đi bạn, cái này CSS2 cũng có rồi, nhưng work không ổn lắm, nên đành ... chờ thôi
Nếu muốn bạn có thể test thử cái này nhé ;)


<div style="word-wrap: break-word; width:500px; border:1px solid red">http://www.google.com.vn/search?hl=vi&client=firefox-a&channel=s&rls=org.mozilla%3Aen-US%3Aofficial&hs=zuL&q=hehe+haha+hoho&btnG=T%C3%ACm+ki%E1%BA%BFm&meta=</div>

Đã test và ... chỉ hoạt động trên ... IE 7.
Đơn giản vì :

Warning: Unknown property 'word-wrap'. Declaration dropped.
Source File: file:///C:/Documents%20and%20Settings/thanhphong/Desktop/test.html
Line: 0
Đành chờ CSS3 ra vậy ;)
Ngoài overflow:hidden ra, bạn cũng có thể dùng overflow:auto ( cái này hay dùng cho cái đoạn code, ddth cũng dùng cách này đó ;) )

[trouble_maker]

aaaaaaaaaaaaaaaaaaaaaaaaaaaaa có bao nhiêu chữ "a" liền nhau mà ko có dấu cách thì nó tính là 1 ký tự thôi, tràn là đúng rồi mà. có overfow: hidden thì nó ẩn đi khi vượt quá cái chiều dài của div đã được định sẵn chiều dài.