溢出的文字隱藏
word-break 自動換行
normal 默認
break-all 允許單詞內執行
keep-all 只能在半角空格或連字符處換行
white-space 用於強制一行顯示內容
normal 默認
nowrap 強制在同一行內顯示所有文本，知道文本結束或者遭遇br標籤才換行
text-overflow 文字溢出
text-overflow: clip | ellipsis
clip 不顯示省略標記（...）直接隱藏
ellipsis： 顯示省略標記（...）
注意：一定要先強制一行內顯示，再和overflow屬性搭配使用
/*
例如要創建2行盒子，第一行2個並排，第二行4個並排
可以先每行分別用div包裹，這樣整體是標準佈局，每一行又分別是浮動佈局
*/
<html>
<head>
<style>
div {
width: 120px;
height: 20px;
border: 1px solid #f00;
white-space: nowrap;
overflow: hidden;
/* text-overflow: clip; */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
我是張三，李四的鄰居
<div>
</body>
</html>