在文本中常用的几个模型:
text-overflow
clip 修剪文本。 ellipsis 显示省略符号来代表被修剪的文本。 string 使用给定的字符串来代表被修剪的文本。
overflow
visible 默认值。内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见的。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。
text-shadow
语法: text-shadow: x 轴位移 (必须) y 轴位移 (必须) 模糊度 (可选) color(可选);
word-break
normal 默认规则 break-all 允许在单词内换行 keep-all 只能在半角空格或者连字符出换行
word-wrap
normal 只在允许的断字点换行(默认) break-word 在长单词或者 url 内部进行换行
word-break 中的 break-all 和 word-wrap 中 break-word 的区别是 break-all 的处理方式是如果当前单词超过边界就会开始换行。而 break-word 是如果当前超过边界行的单词超过两个就会把超过的单词换到下一行,如果当前行超过边界并且当前行的单词只有一个的话,当前单词才会被分离换行。
这是 word-break 中的 break-all 的效果:
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- 无标题文档
- </title>
- <style>
- div{width:100px;border:1px solid #13E144;margin:100px auto;word-break:break-all;}
- </style>
- </head>
- <body>
- <div>
- FireLang dddddddddddddddddddddddd
- </div>
- </body>
- </html>
这是 word-wrap 中 break-word 的效果:
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- 无标题文档
- </title>
- <style>
- div{width:100px;border:1px solid #13E144;margin:100px auto;word-wrap:break-word;}
- </style>
- </head>
- <body>
- <div>
- FireLang dddddddddddddddddddddddd
- </div>
- </body>
- </html>
超出边框区域以省略号来表示:
出现问题时:
解决之后:
个人感觉 nice,在我以前解决这个问题的时候我都一直用的是后台处理,通过替换字符串处理,兼容性不好。前台改后台也得改。
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- 无标题文档
- </title>
- <style>
- .box{width:57px;height:20px;border:1px solid #3DE124;margin:100px auto;white-space:nowrap;
- text-overflow:ellipsis;overflow:hidden;}//其中overflow和text-overflow必须同时结合使用才能有效果。
- </style>
- </head>
- <body>
- <div class="box">
- FireLang---Marvel__Dead
- </div>
- </body>
- </html>
white-space
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br /> 标签为止。
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: