亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

CSS 用字母填充 div 的整個寬度,而不改變字間距

CSS 用字母填充 div 的整個寬度,而不改變字間距

慕容3067478 2021-11-04 15:53:30
所以我正在研究一種密碼生成器,我希望密碼顯示在一個 div 中。一切正常,除了自動換行。像往常一樣,如果下一個單詞對于當前行來說太長,文本就會在每個空格處被拆分。但我希望 css 在開始下一行之前填充 div 的整個寬度。文本abcdefghij klmnopqrstuvwxyz 01234 56789顯示如下(假設行長為 13 個字符)+-------------+|abcdefghij   ||klmnopqrstuvw||xyz 01234    ||56789        |+-------------+但應該是+-------------+|abcdefghij kl||mnopqrstuvwxy||z 01234 56789|+-------------+基本上所有行都應該有相同數量的字母。雖然我不希望 div 的寬度是絕對的,而是屏幕寬度的 80%。我試過了,text-align:justify;但這只會使空間更大。
查看完整描述

2 回答

?
萬千封印

TA貢獻1891條經驗 獲得超3個贊

如果你想在一行中有相同數量的字母,你應該使用等寬字體。


如果您還希望在任意兩個字符之間換行 - 使用word-break: break-all(MDN):


body {

  font-family: Courier New;

}

.container {

  width: 143px;

  height: 150px;

  border: 2px dashed #333;

  margin-bottom: 16px;

}

.container-header {

  padding: 8px;

  height: 16px;

  border-bottom: 2px dashed #333;

}

.container-content {

  padding: 8px;

}

.keep-all {

  word-break: break-all;

}

.break-all {

  word-break: break-all;

}

.break-word {

  word-break: break-word;

}

<div class="container">

  <div class="container-header">keep-all</div>

  <div class="container-content">

    abcdefghij klmnopqrstuvwxyz 01234 56789    

  </div>

</div>


<div class="container">

  <div class="container-header">break-all</div>

  <div class="container-content break-all">

    abcdefghij klmnopqrstuvwxyz 01234 56789    

  </div>

</div>


<div class="container">

  <div class="container-header">break-word</div>

  <div class="container-content break-word">

    abcdefghij klmnopqrstuvwxyz 01234 56789    

  </div>

</div>


查看完整回答
反對 回復 2021-11-04
?
森林海

TA貢獻2011條經驗 獲得超2個贊

也許你可以使用 CSS Word Wrap https://developer.mozilla.org/pt-BR/docs/Web/CSS/word-wrap


查看完整回答
反對 回復 2021-11-04
  • 2 回答
  • 0 關注
  • 160 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號