在跨度之間添加一個空格，以便即使在移除跨度后字符串看起來也正常

Question

這是我的一段代碼。 使用 for 循環，我將每個spanPhrases元素與特定的 span 及其id和class包裝在一起，然后將它們作為單個句子添加到頁面中。

2 秒后（使用 jQuery），我刪除了跨度，同時保持整個句子如下：

// After 2 seconds remove spans and maintain text
$('#answerSentence').find(".spans").contents().unwrap();

問題是我找不到在跨度之間添加空格以使句子看起來正常的方法。 到目前為止，跨度之間沒有空格，只有當我們在removeSpans函數中刪除跨度時，句子在單詞間距的情況下才看起來正常。

我不希望 2 秒后字間距發生變化。

注意：我希望answerSentence函數中的removeSpans沒有任何&nbsp

 let answerPhrases = ['i was sent', 'to earth', 'to live']; let spanPhrases = ["I was sent", " to Earth,", " to live."]; let answer = ''; // put each of spanPhrases into a span with id and class for (let i = 0; i < spanPhrases.length; i++) { answer += `<span class='spans' id='spanID${i}'>${spanPhrases[i]}</span>`; }; // add the text with spans to the page answerSentence.innerHTML = `${answer}`; setTimeout(function() { removeSpans(); function removeSpans() { // After 2 seconds remove spans and maintain text $('#answerSentence').find(".spans").contents().unwrap(); } }, 2000)

 .containerAnswering { position: absolute; overflow: hidden; left: 9.5vw; top: 48vh; height: 29vh; width: 82vw; outline: 0.1vw dashed orange; } .answerSentence-class { position: absolute; white-space: nowrap; font-family: 'Open Sans', sans-serif; font-size: 150%; font-weight: 700; color: rgb(128, 128, 128); left: 0.5vw; opacity: 1; margin: 0; top: 0; bottom: 4vh; display: flex; align-items: center; }

 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <div class="containerAnswering"> <div id="answerSentence" class="answerSentence-class"></div> </div>

Answer 1

你的 JavaScript 是正確的。 您應該修復 CSS 樣式。 如果替換display: flex; align-items:center;這種奇怪的行為就會消失display: flex; align-items:center; display: flex; align-items:center; line-height: 29vh; （在父容器內對齊）在.answerSentence-class 。

我會改變 CSS 如下：

.answerSentence-class {
  position: absolute;
  white-space: nowrap;
  font-family: 'Open Sans', sans-serif;
  font-size: 150%;
  font-weight: 700;
  color: rgb(128, 128, 128);
  left: 0.5vw;
  opacity: 1;
  margin: 0;
  top: 0;
  bottom: 4vh;
  line-height: 29vh;
}

不幸的是，我不知道為什么 flex 會截斷空格。

Answer 2

為什么不將文本換行更改為pre-wrap ？

 let answerPhrases = ['i was sent', 'to earth', 'to live']; let spanPhrases = ["I was sent", " to Earth,", " to live."]; let answer = ''; // put each of spanPhrases into a span with id and class for (let i = 0; i < spanPhrases.length; i++) { answer += `<span class='spans' id='spanID${i}'>${spanPhrases[i]}</span>`; }; // add the text with spans to the page answerSentence.innerHTML = `${answer}`; setTimeout(function() { removeSpans(); function removeSpans() { // After 2 seconds remove spans and maintain text $('#answerSentence').find(".spans").contents().unwrap(); } }, 2000)

 .containerAnswering { position: absolute; overflow: hidden; left: 9.5vw; top: 48vh; height: 29vh; width: 82vw; outline: 0.1vw dashed orange; } .answerSentence-class { position: absolute; white-space: pre-wrap; // Update text wrap font-family: 'Open Sans', sans-serif; font-size: 150%; font-weight: 700; color: rgb(128, 128, 128); left: 0.5vw; opacity: 1; margin: 0; top: 0; bottom: 4vh; display: flex; align-items: center; }

 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <div class="containerAnswering"> <div id="answerSentence" class="answerSentence-class"></div> </div>