选中段落加背景

2021/09/15 CSS 共 1297 字,约 4 分钟

背景

在网页或者app操作经常会有选中,背景高亮的。在之前的文章有说过实现单个字选中高了的操作,可以使用Window.getSelection,之前关于form 元素及表单能做的那些事,还有 css or js 实现展示搜索匹配的结果 里面提过一些实现方式。如果是直接选中一段文字呢?是不是可以更加简单?

实现方式一

该段落使用 span 包裹,如果不想行与行之间有空隙就用padding,如果想就用padding也可以解决

代码就很简单了

div{
  width: 300px;
}
span{
  background: lightyellow;   
}
 <div>
  <span>  既然提到了Web技术,就不得不
    提另一款在Web项目开发中大放异彩的脚本语言Javascript
    。1995 年,Brendan Eich 用了不到 10 天就创建了 Javascript,其最初主要应用于表单验证,而非以速度见长。随着各类应用功能的复杂化,受限于 JavaScript 语言本身动态类型和解释执行的设计,其性能问题逐渐凸现。2008年,围绕着浏览器性能开展的大战终于在各大浏览器厂商间爆发,在先后经历了即时编译器(JITs),以及用Node.js
    和Electron构建应用程序的时期后
    ,WebAssembly有望成为JS引擎突破下一性能瓶颈的转折点。
  </span>
</div>

实现方式二

使用万能的box-shadow,实现也很简单

        .txt {
            width: 300px;
            text-align: justify;
            border: 1px solid;
            background: lightyellow;
            overflow: hidden;
            text-indent: 2em;
        }
        
        p::before {
            content: 'X';
            display: inline-block;
            width: 0;
            color: transparent;
            box-shadow: -999px -999px 0 999px #fff;
        }
        
        p::after {
            content: 'X';
            display: inline-block;
            width: 0;
            color: transparent;
            box-shadow: 999px 999px 0 999px #fff;
        }
        <p class="txt">
        既然提到了Web技术,就不得不提另一款在Web项目开发中大放异彩的脚本语言Javascript。1995 年,Brendan Eich 用了不到 10 天就创建了 Javascript,其最初主要应用于表单验证,而非以速度见长。随着各类应用功能的复杂化,受限于 JavaScript 语言本身动态类型和解释执行的设计,其性能问题逐渐凸现。2008年,围绕着浏览器性能开展的大战终于在各大浏览器厂商间爆发,在先后经历了即时编译器(JITs),以及用Node.js和Electron构建应用程序的时期后,WebAssembly有望成为JS引擎突破下一性能瓶颈的转折点。</p>

总结

关于box-shadow 可是真强大呀,我记得很多实现方式里面都用用到它,type=“range” 实现评星,引导窗等等。有空的时候可以好好的总结实现一下


在技术的历史长河中,虽然我们素未谋面,却已相识已久,很微妙也很知足。互联网让世界变得更小,你我之间更近。

在逝去的青葱岁月中,虽然我们未曾相遇,却共同经历着一样的情愫。谁的青春不曾迷茫或焦虑亦是无奈,谁不曾年少过

在未来的日子里,让我们共享好的文章,共同学习进步。有不错的文章记得分享给我,我不会写好的文章,所以我只能做一个搬运工

我叫 sunseekers(张敏) ,千千万万个张敏与你同在,18年电子商务专业毕业,毕业后在前端搬砖

如果喜欢我的话,恰巧我也喜欢你的话,让我们手拉手,肩并肩共同前行,相互学习,互相鼓励

文档信息

Search

    Table of Contents