Làm thế nào để một từ dài trong div xuống dòng? How to word-wrap/break-word long word in div?

Trong khi thiết kế một một trang web thông thường ta có thể gặp một số vần đề việc một chữ quá dài(ví dụ như một dòng mã nào đó), dài hơn chiều dài của một div được định nghĩa dẫn tới việc nó tràn ra ngoài thẻ div, ví dụ như hình bên dưới.

Và điều này gây ảnh hưởng thiết kế của bạn để dễ hình dung ta hãy xem hai ví dụ bên dưới thể hiện vấn đề mà ta gặp phải, một hình thì một dòng mã ký tự quá dài tràn ra khỏi kích thước thẻ div mà bạn đã định nghĩa. Để giải quyết trường hợp này ta sử dụng các thuộc tính CSS white-space và word-wrap với các thông số sau:

   white-space: pre-wrap;      /* CSS3 */  
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -pre-wrap;     /* Opera <7 */  
   white-space: -o-pre-wrap;   /* Opera 7 */   
   word-wrap: break-word;      /* IE */

Hoặc có thể xây dựng hẳn một lớp riêng cho nó:

.wordwrap {
   white-space: pre-wrap;      /* CSS3 */  
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -pre-wrap;     /* Opera <7 */  
   white-space: -o-pre-wrap;   /* Opera 7 */   
   word-wrap: break-word;      /* IE */
}

Demo: