CSS3 text-wrap文本换行规则属性

原创 国哥笔记  2018-09-11 17:54  阅读 731 views 次

text-wrap属性定义及用法

css3中,text-wrap 属性是用来定义文本的换行(折行)规则,是css3新增属性,目前主流浏览器暂时还不支持;text-wrap属性默认值为normal,即正常换行;

text-wrap属性语法

css语法:text-wrap: normal / none / unrestricted / suppress;

JavaScript语法:object.style.textWrap="none";

text-wrap属性值

  • normal:正常换行,在需要换行的地方自动换行;
  • none:不换行,就算文本超出容器也不会换行;
  • unrestricted:在任意两个字符间换行。
  • suppress:压缩元素中的换行,浏览器只在行中没有其他有效换行点时进行换行。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS top顶部边缘偏移属性</title>
<style type="text/css">
body{background: #ccc;}
.a,.b{width: 250px;height: 60px; margin:auto; border: 1px solid #000;text-wrap:normal;}
.b{text-wrap:none;}
.c{color: red;}
</style>
</head>
<body>
<div class = "a">text-wrap:normal;这一行会正常换行!</div>
<div class = "a b">text-wrap:none;这一行不会换行!会超出边界!</div>
<div class = "a c">目前主流浏览器暂时还不支持text-wrap属性,所以看不出效果!</div>
</body>
</html>

运行结果:

CSS3 text-wrap文本换行规则属性

说明:由于目前主流浏览器暂时还不支持text-wrap,以上运行结果并不是理论要达到的效果。

文本相关属性

  • text-align:定义文本的水平对齐方式;
  • text-align-last:定义如何对齐文本的最后一行;
  • text-decoration:定义添加到文本的修饰(如:下划线:underline、上划线:overline、中划线:line-through等);
  • text-decoration-color:规定文本修饰的颜色(如:定义下划线的颜色);
  • text-decoration-line:规定文本修饰的线条类型(如:定义文本的下方显示一条线);
  • text-decoration-style:规定文本修饰的线条如何显示(如:定义线条显示为双线);
  • text-indent:定义文本块中首行文本的缩进;
  • text-justify:指定应怎样对齐文本以及对齐间距(如:增加/减少单词间的间隔);
  • text-outline:定义文字大纲;
  • text-overflow:定义文本溢出包含它的元素时,应该怎样处理(如:显示省略符号来代表被修剪的文本);
  • text-shadow:应用于阴影文本;
  • text-transform:定义文本的大小写(如:定义只有大写字母);
  • text-wrap:定义文本换行规则(如:不允许换行);

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-text-wrap.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情