內容刪除後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僞元素移動到下一行

回答

相關問題