CSS 小结笔记之文字溢出处理
生活随笔
收集整理的這篇文章主要介紹了
CSS 小结笔记之文字溢出处理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
有時文字會溢出盒子，這時一般要對文字進行溢出處理。一般有以下三種處理方法：
1、word-break:normal |?break-all |keep-all?
normal 使用瀏覽器默認的換行
break-all 允許單詞內換行即允許單詞拆開顯示
keep-all 不允許拆開單詞顯示，連字符除外
這種方法只允許英文是使用，對中文無效。 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 120px;height: 25px;border: 1px solid red;margin: 100px;}div:first-child {word-break: normal;}div:nth-child(2) {word-break: break-all;}div:last-child {word-break: keep-all;}</style> </head><body><div>my name is abcd .</div><div>my name is abcd .</div><div>my name is ab-cd .</div> </body></html> View Code結果如下
2、white-space：normal |nowrap normal正常換行 nowrap 強制同一行內顯示所有文本 允許中文 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 120px;height: 25px;border: 1px solid red;margin: 100px;}div:first-child {white-space: normal;}div:last-child {white-space: nowrap;}</style> </head><body><div>這是一行超級長的文字文字文字</div><div>這是一行超級長的文字文字文字</div></body></html> View Code 3、text-overflow:clip |?ellipsis? clip直接裁剪; ellipsis 超出的部分用省略號代替; ellipsis 使用扥前提是 （1）必須讓文本先強制一行顯示 （2）必須要和overflow搭配使用 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 120px;height: 25px;border: 1px solid red;margin: 100px;}div:first-child {text-overflow: clip;}div:last-child {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}</style> </head><body><div>這是一行超級長的文字文字文字</div><div>這是一行超級長的文字文字文字</div></body></html> View Code轉載于:https://www.cnblogs.com/Assist/p/9639774.html
總結
以上是生活随笔為你收集整理的CSS 小结笔记之文字溢出处理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 编译过程中的链接地址对最终编译镜像文件的
- 下一篇： Python day7之mysql