Question

我一直在寻找并且未能自己找到解决方案。我试图建立一个基本的可信代码编辑器，对于行号，我选择在CSS伪元素中使用一个计数器设置的每一行的段落。这是小提琴：http://jsfiddle.net/zppb29jw/

问题是，如果段落稍微长一点，文本的其余部分将会在我的计数器伪元素下面。我想拉伸：在计数器之前与段落的高度相同。

我尝试在段落上使用position:relative，在p：之前position:absolute; height:100%使用伪元素，如下所述：How can the pseudo element detect the height of the non-pseudo element?

这在我的情况下不起作用，因为我不希望p：before元素重复并覆盖段落，我只想要与现在相同的行为，只需要p:before元素拉伸与主p相同的高度。

我也不希望线条拉伸超过包装容器的宽度。我一直在尝试很多方法但未能找到解决方案。

Answer 1

代替height使用position:relative代表p和absolute代表

Js Fiddle

在css中添加的新属性

.editor p {
    position:relative;
    padding-left:3.5em;
}

.editor p:before {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
 }

修改

这应该是第二个问题：D

在enter中按Ie不会创建br，而在现代浏览器中，使用br创建:after会修复问题，以便{{1} }标签不会保持为空

Js Fiddle

p

.editor { display: inline-block; border: 1px black solid; font-family: "Consolas", "Monaco", "Courier New", monospace; counter-reset: line; width: 90%; height: 350px; overflow: scroll; padding-left: 0; margin-left: 0; z-index: 1; } .editor p { display: block; counter-increment: line; background-color: #FFF; text-align: left; margin: 0px; z-index: 2; outline: none; position: relative; padding-left: 3.5em; } .editor p:before { display: inline-block; width: 2em; height: 100%; border-right: 1px black solid; padding-right: 1em; margin-right: 1em; content: counter(line); color: #FFF; background-color: #006; text-align: right; position: absolute; top: 0; bottom: 0; left: 0; /*-webkit-user-select: none; user-select: none;*/ } .editor p:after { content: " " }

Answer 2

由于您希望行号和行以类似表格的方式显示，因此自然的方法是使它们成为表格：将可编辑区域声明为表格（在CSS意义上），使行条行，并生成生成的行数字表格单元格：

＆＃13;

.editor {
	display: tablek;
    border: 1px black solid;
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    counter-reset: line;
	
	width:90%;
	height:350px;
	overflow:scroll;
	padding-left:0;
	margin-left:0;
	z-index:1;
	
}
.editor p {
	display: table-row;
    counter-increment: line;
	background-color:#FFF;
	text-align:left;
	margin:0px;
	z-index:2;
	outline: none;
	
}
.editor p:before {
	display: table-cell;
    width:2em;
	height:100%;
    border-right: 1px black solid;
    padding-right: 1em;
    margin-right: 1em;
    content: counter(line);
	color:#FFF;
	background-color:#006;
	text-align:right;
	
	/*-webkit-user-select: none;
    user-select: none;*/
}

＆＃13;

<div class="editor" contenteditable="true" spellcheck="false">
<p>Some paragraph</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc non pulvinar luctus. Cras finibus turpis at arcu mollis, nec fermentum mi pretium. Aliquam suscipit lacus sapien, eu fringilla enim malesuada quis. Sed ut tincidunt erat. In posuere vulputate venenatis. Mauris quis porta magna. Phasellus pharetra in nisl et luctus. Etiam in ultrices risus. Morbi vel dapibus ex. Suspendisse gravida libero non malesuada congue. Pellentesque ut nunc diam.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

＆＃13;

Answer 3

http://jsfiddle.net/zppb29jw/2/

p {
    position:relative;
    left: 4em;
    ...

p:before {
    position:absolute;
    right:100%
    display:block;
    ...

对你好吗？

Answer 4

.black_right{
    position: relative;
    display: table;
    width: 100%;
    z-index: 10;
}
.black_right::after{
    content: " "; 
    top: 0px;
    height: 100%;
    width: 100%;
    box-shadow: 500px 0px #000;
    position: absolute;
}

使CSS伪元素：在与主元素相同的高度之前

4 个答案: