如何在字母和標點符號之間進行換行以避免在行尾有額外的空白空間？

-2

第一個盒子在第一行的末尾有一個惱人的空白。第二個盒子工作正常。如何在字母和標點符號之間進行換行以避免在行尾有額外的空白空間？

我想CSS試圖避免標點符號出現在一行的開頭。但它會導致醜陋的地形。

我該如何強制它換行？

.box { 
 
    margin: 2em; 
 
    padding: 0.5em; 
 
    width: 8em; 
 
    height: 8em; 
 
    border: 1px solid; 
 
} 
 
.text { 
 
    font-size: 1em; 
 
}

<div class="box"> 
 
    <p class="text">你好，我來自中國！！！你好，我來自中國！</p> 
 
</div> 
 
<div class="box"> 
 
    <p class="text">你好，我來自中國你好，我來自中國</p> 
 
</div>

來源

2015-12-04 wang zhihao

不清楚你在問什麼;你認爲結果是什麼樣的？你想「強制包裝」什麼，以及在哪裏？ – CBroe

@wang嘗試爲類'文本'提供'text-align：justify' – Webruster

@Webruster對於這種情況，'justify'不適用於這種情況，我想要像第二個盒子一樣精確對齊。 –

既然你寫中國，我想word-wrap: break-word; word-break: break-all;會服務宗旨：

.box { 
 
    margin: 2em; 
 
    padding: 0.5em; 
 
    width: 8em; 
 
    height: 8em; 
 
    border: 1px solid; 
 
} 
 
.text { 
 
    font-size: 1em; 
 
    word-wrap: break-word; 
 
    word-break: break-all; 
 
    white-space: pre; 
 
}

<div class="box"> 
 
    <p class="text">你好，我來自中國！！！你好，我來自中國！</p> 
 
</div> 
 
<div class="box"> 
 
    <p class="text">你好，我來自中國你好，我來自中國</p> 
 
</div>

來源

2015-12-04 12:59:43 AVAVT

你的代碼仍然有額外的空間。 –

是的，我忘了Chrome。再次檢查我修好了。 – AVAVT

乾杯！有用。 –

如何在字母和標點符號之間進行換行以避免在行尾有額外的空白空間？

回答

相關問題