内容删除后HTML/CSS伪元素移动到下一行

我正在学习HTML + CSS，我正在尝试在HTML/CSS中编写控制台模拟器。伪元素::后有问题。我有<pre class="commands" contenteditable id="0"></pre>，编写命令的可编辑行是什么。我可以点击这条线并写点东西，但是当我写一些东西时“a”并删除它，我的“提示”（我认为这是英语中的好词）转到下一行，但它应该保留。如何防止这一点？内容删除后HTML/CSS伪元素移动到下一行

我的代码：

ERROR 404

来源

2017-10-08 Jeremy Clarkson

我总是看到它在新的生产线，甚至当我删除 – Pedram

我加screenshoots我的意思。 –

是的，但仍然没有看到任何问题，我键入'a'然后删除它，什么都没有发生，它保持在同一行。你在这个演示中看到这个问题吗？ – Pedram

好了，我发现你的问题的原因，firefox添加<br>在<pre>标签，我不知道为什么，它不是在chrome happend反正，你快速的解决方案是：

pre br { 
    display: none; 
}

$(document).ready(function(){ 
 
    var line=0; 
 
    var type=document.getElementById(line); 
 
    var currentIndex=0; 
 

 
var start=function(text){ 
 
    currentIndex=0; 
 
    var interval=setInterval(function(){ 
 
    if(text.length>currentIndex){ 
 
     type.textContent+=text[currentIndex]; 
 
     currentIndex++; 
 
    } 
 
    else{clearInterval(interval);} 
 
    },100 
 
); 
 
} 
 

 
//start("How are you today?"); 
 

 
$(document).keypress(function(e){ 
 
    console.log(e.keyCode); 
 
    switch(e.keyCode){ 
 
     case 13: newLine(); break; 
 
     case 38: start(" Mateusz."); break;} 
 
}); 
 

 
var newLine=function(){ 
 
    line++; 
 
    $("#console").append('<div class="prompt">$</div><pre class="commands" id="'+line+'"></pre>'); 
 
    type=document.getElementById(line); 
 
} 
 
});

*{ 
 
    border: 1px dashed gold; 
 
} 
 

 
pre br { 
 
    display: none; 
 
} 
 

 
#console{ 
 
    background-color: black; 
 
    width: 600px; 
 
    height: 400px; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    border: 10px solid silver; 
 
    padding: 10px; 
 
    overflow-x: scroll; 
 
} 
 

 
.prompt{ 
 
    color: green; 
 
    font-weight: bold; 
 
    font-family: monospace; 
 
    font-size: 14px; 
 
    display: block; 
 
} 
 

 
.prompt::before{ 
 
    content: '[email protected] ~ '; 
 
    color: lime; 
 
} 
 

 
.commands{ 
 
    color: white; 
 
    display: inline; 
 
    font-family: monospace; 
 
    font-size: 14px; 
 
} 
 

 
.commands::after{ 
 
    content: "|"; 
 
    color: white; 
 
    width: 1px; 
 
    height: 1px; 
 
    background-color: white; 
 
    /*border: 1px solid white;*/ 
 
    animation-name: ps1; 
 
    animation-duration: 1s; 
 
    animation-iteration-count: infinite; 
 
    display: inline; 
 
} 
 

 
@keyframes ps1{ 
 
    from{ 
 
    opacity: 0; 
 
    } 
 
    to{ 
 
    opacity: 1; 
 
    } 
 
} 
 

 
[contenteditable]:focus { 
 
    outline: 0px solid transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="console"> 
 
    <div class="prompt">$</div> 
 
    <pre class="commands" contenteditable id="0"></pre> 
 
</div>

来源

2017-10-08 13:23:52 Pedram

内容删除后HTML/CSS伪元素移动到下一行

回答

相关问题