在使用Vue开发前端页面的时候，难免会遇到接收的字符串过长，需要让字符串换行。以往在HTML页面开发中，常用的方法是word-wrap：break-word；添加上这行代码后，在块元素定义的宽度不够时输出的文本内容就会换行。但是在vue中使用word-wrap属性就不起作用，网上查找资料说使用white-space：pre-line;就可以实现换行。本文就简单介绍下white-space的使用。

因为我没有系统的学过前端，就是遇到一点问题学习一点前端知识。当我在这次实现换行效果的过程中就学习使用了white-space的用法。

如图：

关键点：

• 文本超出了隐藏

overflow: hidden;

• 超出部分使用...代替

text-overflow: ellipsis;

常见的换行符

Java程序中的换行符一般使用“\n”表示，它是一个转义字符，表示换行符。根据操作系统的不同，换行符的实际表示可能不同：

• 在Windows系统中，换行符由两个字符“\r\n”表示，即回车符和换行符。
• 在Unix/Linux系统中，换行符只由一个字符“\n”表示，即换行符。

*****声明：此实例仅用于学习 *****

1.网页重定向 。

在分析房天下网站，不难发现每个网页有个重定向，比如：访问网页https://cd.esf.fang.com/chushou/3_211293494.htm会跳转至https://cd.esf.fang.com/chushou/3_211293494.htm?rfss=1-b71f212cbb874a451c-3a 这个网页，其实两个地址打开的是同一个网页

一、普通定位和相对定位

css中的元素有两种元素，块级元素和行级元素，块级元素每定义一个，第二个会自动换行，行级元素不会换行。如下图定义了三个块级元素div和两个行级元素span。

1.定位

• 定位是一种更加高级的布局手段

作者 | zoyoy

责编 | 伍杏玲

出品 | CSDN博客

CSS单行/多行文本，超出隐藏并显示省略号

方法一：使用CSS属性

单行文本溢出显示省略号

width: 100px;
overflow: hidden;
text-overflow:ellipsis; //文本溢出显示省略号

双击文本不选中文本

在css中加： user-select:none;