css篇-mask-image + linear-gradient 优雅显示富文本过长

html-css020

css篇-mask-image + linear-gradient 优雅显示富文本过长,第1张

明人不说暗话,直接上例子

由于富文本属于长文本,在页面上我们会有这种超出隐藏的功能需求,

如果是纯文本的话,我们大可以用slice截取字符串的方式来先显示几个字的方式,

但是由于富文本是由不同的html标签组成,这样的我们就会显得棘手。

如果我们不用蒙版遮罩的方式,就会变成这样

不做处理的话,就觉得比较生硬,所以用上了mask-image + linear-gradient 就会显得比较优雅。

这里只是用了mask-image的一些属性,当然mask-image能够做的不止这些,具体有兴趣的可以去摸索看看咯。

采用Iframe去解决这种问题,不只是重复抓取对服务器造成的压力,更严重的是搜索引擎抓取不到具体内容,影响收录。

一般的标签,例如p、strong即使被截断也不会影响到布局的CSS,只是div这种标签可能会影响到。对于如何解决,其实你想多了,很简单,就是在发布内容的时候,全选,更改内容格式为段落(普通),而不是直接使用段落(div)。

富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色、大小、样式等信息问题一个文本编辑器。下面简单的介绍一下富文本编辑器的用法和简要的原理。

1、什么是富文本编辑器?

抛开专业的定义,用自己的话来介绍一下到底什么是富文本编辑器。先举个简单的例子,大家大多都使用过网上的一些博客系统或者论坛贴吧吧,那我们要发布一则文章或者消息的时候我们需要在后台设置一下这段文本的格式还有字体的大小粗细颜色等样式,此时网页上会有一个设置这些信息的菜单或者是一个网页的文本编辑器,这个就是富文本编辑器的常见应用,如下图:

富文本编辑器不同于我们平时的文本编辑器,但是其功能确实和我们的平时使用的word的是类似的,只不过富文本编辑器设置是解决不会编写 HTML 的用户并需要设置各种文本格式在我们的网页上。

2、富文本编辑器的原理和应用

关于富文本编辑器的原理,一些人可能以为富文本编辑器的原理十分的复杂,事实上也并非如此,当然功能强大的编辑器自然会很难实现。网页上的富文本编辑器的大致原理是使用JavaScript技术将用户的输入的内容和设置的样式转换为html、css等浏览器可以认识的代码,其核心的实现技术就是JavaScript和html 、css等前端技术。

富文本编辑器的应用,比如做为一个网站的开发者,当我们需要一个发布文章的功能时候,用户可能不知道html代码,此时我们可以使用一些别人写好的富文本编辑器嵌入到我们的程序中即可解决这一问题。