- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我有一个 <div>
.其中,有一个 <p>
在屏幕上看起来像下面的图片
我需要在段落的每一行下面都有水平线(图中红色标记的水平线)。最重要的是水平线应该占据父级的整个宽度 <div>
所以text-decoration: underline
不会在这里工作。我像这样使用重复的线性渐变绘制线条
p.text--underline {
line-height: 1.45;
background: repeating-linear-gradient(
to bottom,
transparent calc(1.5em - 1.5px),
black 1.5em,
transparent 1.5em,
transparent calc(3em - 1.5px)
);
box-shadow: inset 0 0.5em white;
}
但问题是水平线在浏览器中可见,但在打印时不可见。我需要它们在纸上可见。如何做到这一点?
最佳答案
您可以用 <span>
包裹每个单词并用每个单词的边界画线 :after
.如果 <p>
中的文本,您将需要添加一些 JavaScript不完全在您的控制之下,您不能在服务器上用 span 包装单词。
var p = document.querySelector('p');
var words = p.textContent.split(/\s+/gm);
p.classList.add('container');
p.innerHTML = words.map(function(w) {
return '<span class="word">' + w + '</span>';
}).join('\n');
.container {
position: relative;
}
.word:after {
content: '';
display: block;
position: absolute;
left: 0;
width: 100%;
border-bottom: 1px solid black;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit diam justo, in vulputate massa sodales egestas. Aenean luctus sapien eleifend ipsum venenatis, nec pharetra sem congue. Quisque nec sem leo. Donec posuere nibh ut nibh vehicula, ut hendrerit mi sollicitudin. Proin sed sapien vel sem ultrices euismod eget quis urna. Nulla facilisi. Sed eu mi ac nulla consequat lobortis ac ac elit. Mauris sit amet ante ac ante pulvinar ultricies a ut ante. Suspendisse metus nulla, porttitor et augue quis, consectetur fermentum lorem. Phasellus metus est, ultrices quis enim porta, facilisis cursus ante. Ut justo quam, suscipit nec facilisis eget, elementum ac lectus. Nulla at auctor ipsum.</p>
</div>
笨蛋: https://plnkr.co/edit/tJfLhixTTJ53FVe10ugw?p=preview
我已经在 Chrome、Firefox 和 Safari 中进行了测试,并且在所有这些平台上都运行良好。
关于javascript - 从浏览器打印重复线性渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46388181/
在我的 previous question ,已经确定,当纹理四边形时,面部被分解为三角形,纹理坐标以仿射方式插值。 不幸的是,我不知道如何解决这个问题。 provided link很有用,但没有达到
是否有简单的解决方案可以在 Qt 中为图像添加运动模糊?还没有找到任何关于模糊的好教程。我需要一些非常简单的东西,我可以理解,如果我可以改变模糊角度,那就太好了。 最佳答案 Qt 没有运动模糊过滤器。
我想构建一个有点复杂的轴,它可以处理线性数据到像素位置,直到某个值,在该值中所有内容都被归入一个类别,因此具有相同的数据到像素值。例如,考虑具有以下刻度线的 y 轴: 0%, 10%, 20%, 30
我需要确保两个 View 元素彼此相邻且垂直高度相同。我会使用基线约束来做到这一点,但目前我正在使用线性、可滚动的布局( ScrollView 中的线性布局),当我点击一个元素时,它不允许我从中获取基
考虑正则表达式 ".*?\s*$" 和一个不以空格结尾的字符串。 示例 " a" .最后\s永远无法匹配 a这就是为什么 匹配器迭代: \s\s\s\s\s - fails .\s\s\
Closed. This question needs to be more focused。它当前不接受答案。 想要改善这个问题吗?更新问题,使它仅关注editing this post的一个问题。
我正在尝试阅读英特尔软件开发人员手册以了解操作系统的工作原理,这四个寻址术语让我感到困惑。以上是我的理解,如有不对请指正。 线性地址 : 对一个孤立的程序来说,似乎是一长串以地址0开头的内存。该程序的
有很多方法可以使用正则表达式并相应地使用匹配/测试匹配来检查字符串是否有效。我正在检查包含字母(a-b)、运算符(+、-、/、*)、仅特殊字符(如(')'、'(')和数字(0-9)的表达式是否有效 我
我正在使用 iris 数据集在 R 中练习 SVM,我想从我的模型中获取特征权重/系数,但我想我可能误解了一些东西,因为我的输出给了我 32 个支持向量。假设我要分析四个变量,我会得到四个。我知道在使
我正在使用 iris 数据集在 R 中练习 SVM,我想从我的模型中获取特征权重/系数,但我想我可能误解了一些东西,因为我的输出给了我 32 个支持向量。假设我要分析四个变量,我会得到四个。我知道在使
如何向左或向右滑动线性布局。在该线性布局中,默认情况下我有一个不可见的删除按钮,还有一些其他小部件,它们都是可见状态,当向左滑动线性布局时,我需要使其可见的删除按钮,当向右滑动时,我需要隐藏该删除按钮
我正在编写一个 R 脚本,运行时会给出因变量的预测值。我的所有变量都被分类(如图所示)并分配了一个编号,总类数为101。(每个类是歌曲名称)。 所以我有一个训练数据集,其中包含 {(2,5,6,1)8
如果源栅格位于 linear RGB color space使用以下 Java 代码进行转换,应用过滤器时(最后一行)会引发 java.awt.image.ImagingOpException: Un
我想为我的多个 UIImageView 设置动画,使其从 A 点线性移动到 B 点。 我正在使用 options:UIViewAnimationOptionCurveLinear - Apple 文档
我第一次无法使用 CSS3 创建好看的渐变效果。右侧应该有从黑色到透明的渐变透明渐变。底部是页脚,所以它需要在底部另外淡化为透明。 如果可能的话,一个例子: 页面的背景是一张图片,所以不可能有非透明淡
我有一组线性代数方程,Ax=By。其中A是36x20的矩阵,x是20x1的 vector ,B是36x13,y是13x1。 排名(A)=20。因为系统是超定的,所以最小二乘解是可能的,即; x = (
我有一个带有年月数据列(yyyymm)的 Pandas 数据框。我计划将数据插入每日和每周值。下面是我的 df。 df: 201301 201302 201303
假设我想找到2条任意高维直线的“交点”。这两条线实际上不会相交,但我仍然想找到最相交的点(即尽可能靠近所有线的点)。 假设这些线有方向向量A、B和初始点C、D,我可以通过简单地设置一个线性最小二乘问题
如果我想编写一个函数(可能也是一个类),它从不可变的查找表(调用构造函数时固定)返回线性“平滑”数据,如下所示: 例如func(5.0) == 0.5。 存储查找表的最佳方式是什么? 我正在考虑使用两
给定一条线 X像素长如: 0-------|---V---|-------|-------|-------max 如果0 <= V <= max , 线性刻度 V位置将是 X/max*V像素。 如何计
我是一名优秀的程序员,十分优秀!