css3基礎---文字排列(文字朝向,換行,多出省略號)
阿新 • • 發佈：2021-07-05
direction:控制文字的方向
一定要配合unicode-bidi:bidi-override;來使用
文字排列朝向
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> <style> div { width: 200px; height: 200px; border: 1px solid; margin: 0 auto; direction: rtl; unicode-bidi: bidi-override; } </style> </head> <body> <div>真不錯</div> </body> </html>
white-space 換行屬性
規定段落中的文字不進行換行：
p { white-space: nowrap }
text-overflow
確定如何向用戶發出未顯示的溢位內容訊號。
div.test
{
text-overflow:ellipsis;
}
clip修剪文字。
ellipsis顯示省略符號來代表被修剪的文字。
string使用給定的字串來代表被修剪的文字。
多出內容省略號顯示
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> <style> div{ width: 200px;height: 200px; border: 1px solid; margin: 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div>真不錯真不錯真不錯真不錯真不錯真不錯真不錯真不錯真不錯真不錯真不錯</div> </body> </html>