問題

當將頁面縮放到最小時,文字顯示錯誤。 這是 URL 到這個頁面.

預設的頁面 – 100%(文字顯示正確)。

Correct format at 100% scale

頁面的最小尺度為25%(文字顯示錯誤)。

Strange format at minimalized scale

這是具有相同問題的簡短程式碼:

 <!DOCTYPE html>
<HTML>
 <HEAD>
  <TITLE>thisistest</TITLE>
 </HEAD>
 <BODY>

  <DIV style='width:180px;background-color:gray;font-size:small;'>
   thisistest thisistest thisistest
  </DIV>

 </BODY>
</HTML>
 

  最佳答案

發生這種情況的原因

圖示和文字在一個按鈕內,你可以想象它像它們像文字一樣處理:如果當前行中沒有足夠的空間,將當前的東西留在行中並開始一個新的東西 – 就像在Text-Editor中一樣.但是在你的情況下,它還將重點放在按鈕內部.

<button style="text-align: left">將圖示和所有東西保留在左側.

備選案文2 - 如果你想保持比例

從容器的寬度將 320px 更改為 20rem

幾年前,畫素會是正確的選擇,但是許多事情發生了變化,Rem現在是更好的選擇。

深入瞭解你可以在這裡閱讀的px和rem之間的區別,但接受的答案是從2012年開始的,第二個答案是最近的一個,更適用於今天的網站程式設計:我應該在我的CSS中使用px或rem值單元嗎?

另一個解決方案是

另一個選項是組織按鈕內的空間.像這樣:

 <button>
    <div style="float:left">
       <img src="images/agreement.svg" style="width:12px;vertical-align:middle;">
    </div>
    <div style="float: left">
        <ii style="vertical-align:middle;">пользовательское соглашение</ii>
    </div>    
</button>
 

但是如果你的語言——就像你的情況一樣——有更長的可用空間的單詞,這將不會很好地工作.這個單詞將從第二行開始,因為第一行沒有空間.

 button {
  width: 400px;
  font-size: 36px;
} 
 <button>SomeReallyLongWordThatCannotBeContainedInASingleLine</button> 

但長詞也可以透過CSS分解如下:

為此使用word-wrap.

 button {
  width: 400px;
  font-size: 36px;
  word-wrap: break-word;
  overflow-wrap: break-word
} 
 <button>SomeReallyLongWordThatCannotBeContainedInASingleLine</button> 

  相同標籤的其他問題

htmlcss