我有一個& quotdiv & quot有兩個& quotspan & quot。 A & quotspan & quot獲取用戶輸入的文本，并將其發送到后端以生成以下文本(類似于自動完成)。 第二個& quotspan & quot是由模型生成的文本的返回，這將是一個補充建議。如下圖所示。

問題是，有時第二個文本會被覆蓋，使可視化變得尷尬。我想看看能不能把第二個& quotspan & quot在第一個& quotspan & quot。

我已經試過用& quot左填充& quot在第二個& quotspan & quot，但在某些時候，第一個& quotspan & quot覆蓋它。

以下是代碼:

HTML-& gt；

<template>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <div class="pad-container">
   <div tabindex="1" @focus="setCaret" class="divAutocomplete">
     <span @input="sendText" @keypress="preventInput" ref="editbar" class="editable" contenteditable="true" placeholder='Digite sua busca'></span> 
     <span class="placeholder" data-ondeleteId="#editx" contenteditable="false">{{String_Text}}</span>     
   </div>
 </div>
</template>

CSS-& gt；

<style scoped>
   .pad-container {
       padding: 0;
       width: 640px;
       border-radius: 12px;
       border: medium solid;
       border-color: #0072c6;
    },
  .divAutocomplete {
       font-family: "Crete Round";
       font-size: 16px;
       border-radius: 8px;
       height: 32px;
       width: 100%;
       text-align: left;
       position: relative;
       background-color: hwb(244 16% 17% / 0.1);
       caret-color: #0072c6;
       color: #0072c6;
     },
  span {
       display: block;
       min-width: 1px;
       outline: none;
     },
 .editable {
       position: absolute;
       left: 8px;
       top: 5px;
       text-transform: lowercase;
     },
 .placeholder {
       color: gray;
       position: absolute;
       left: 8px;
       top: 5px;
       z-index: -1;
     }
</style>

"字符串文本& quot是簡單的文本，如& quot你好世界& quot或者& quot歡迎來到白宮& quot。如果可能的話，我希望它看起來像這樣:

這樣，當用戶鍵入文本時，第二個& quotspan & quot會保留第一個& quotspan & quot

要使建議與可編輯文本保持恒定距離，您必須:

移除位置:絕對遠離兒童， 給父顯示:flex， 給第二個子顯示:inline-block和一個較小的左填充 大概就是這樣:

.parent {
  padding: 1rem;
  border-radius: 12px;
  border: medium solid;
  border-color: #0072c6;
  display: flex;
}

.editable {
  min-width: .5rem;
  background-color: hwb(244 16% 17% / 0.1);
  caret-color: #0072c6;
  color: #0072c6;
  font-weight: bold;
  outline: none;
}

.suggestion {
  padding-left: .5rem;
  display: inline-block;
}

<div class="parent">
  <div class="editable" contenteditable>This is the editable text...</div>
  <div class="suggestion">This is the dynamic suggestion...</div>
</div>