word-break:break-all;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Word Break Example</title> <style> table { width: 100%; border-collapse: collapse; } td { border: 1px solid #000; padding: 10px; word-break: break-all; } </style> </head> <body> <table> <tr> <td>This is a short text.</td> <td>ThisIsAReallyLongWordWithoutAnySpacesOrBreaksToSeeHowWordBreakBreakAllWorks.</td> </tr> </table> </body> </html> |
적용전
word-break: break-all; CSS 속성은 단어를 중간에서 끊어 다음 줄로 넘길 때 사용됩니다. 이를 사용하여 테이블 데이터 셀(td)에서 단어가 길 때 어떻게 동작하는지 보여주는 예제를 만들어 보겠습니다.
적용후
