Underline text with line when selected(选中时为文本加下划线)
本文介绍了选中时为文本加下划线的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
创意:
我希望在选择文本部分时将文本加下划线(最好是渐变色like here),而不是更改背景。根据Mozillatext-decoration
是可能的,text-decoration: underline
也是可能的。
问题:
(text-decoration
带::selection
不适用于我(Chrome&;Edge)-已解决)。
解决方案理念:
在进行选择时是否可以将文本加下划线为渐变?我的一个想法是使用JavaScript
查看文本是否被选中,然后在文本之间添加一个id="underline"
,然后包含渐变线的CSS代码。
进度:
整件事不是纯css就能实现的。我现在已经更改了代码,以便当选定内容也是时,文本会适当地加下划线。
进度问题:
即使在取消选择后,该行仍保持不变。
当前代码:
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"> function wrapSelectedText() {
var selectedText = window.getSelection().getRangeAt(0);
var selection = window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var span = document.createElement("span");
/* Styling */
span.style.backgroundImage = "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)";
span.style.backgroundRepeat = "no-repeat";
span.style.backgroundSize = "100% 0.2em";
span.style.backgroundPosition = "0 88%";
span.appendChild(selectedText);
selection.insertNode(span);
}
document.onmouseup = document.onkeyup = document.onselectionchange = function() {
wrapSelectedText();
};
::selection {
background: none;
}
<p>This is an example text.</p>
推荐答案
文本装饰需要已存在于元素上,方法是在p
元素上定义text-decoration: underline overline transparent;
它确实起作用。
::selection {
background: yellowgreen; /* To check if the text is selected */
text-decoration: underline overline #FF3028; /* Only works on elements that have the same decoration properties set already */
}
p {
color: black;
font-size: 18px;
text-decoration: underline overline transparent;
}
<p>This is an example text.</p>
这篇关于选中时为文本加下划线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:选中时为文本加下划线
猜你喜欢
- Quasar 2+Apollo:错误:找不到ID为默认的Apollo客户端。如果您在组件设置之外,请使用ProvideApolloClient() 2022-01-01
- 失败的 Canvas 360 jquery 插件 2022-01-01
- 使用RSelum从网站(报纸档案)中抓取多个网页 2022-09-06
- CSS媒体查询(最大高度)不起作用,但为什么? 2022-01-01
- addEventListener 在 IE 11 中不起作用 2022-01-01
- Flexslider 箭头未正确显示 2022-01-01
- Css:将嵌套元素定位在父元素边界之外一点 2022-09-07
- 如何使用 JSON 格式的 jQuery AJAX 从 .cfm 页面输出查 2022-01-01
- Fetch API 如何获取响应体? 2022-01-01
- 400或500级别的HTTP响应 2022-01-01