The box model - daniel-qa/Vue GitHub Wiki

CSS box-sizing

方法一：直接限制 tooltip-inner
.tooltip-custom .ivu-tooltip-inner {
  min-width: 500px !important;
  max-width: 550px !important;
  box-sizing: border-box;
  overflow-wrap: break-word; /* 長字自動換行 */
}

這樣無論 transfer 到哪裡，都會生效，不依賴 slot 內 div。

border-box 可以防止超框

  • box-sizing 的作用

在 CSS 的預設盒模型（content-box）中，當你設定元素的 width 和 height 時，這些值只包含內容區域的大小，不包括邊框和內距。

這意味著，實際渲染出來的元素大小會比你設定的 width 和 height 還要大。

使用 box-sizing: border-box; 時，元素的 width 和 height 包含了邊框和內距。也就是說，設定的寬高會是元素的總寬高，這樣可以更精確地控制元素的尺寸，尤其在進行響應式設計時非常有用。

  • CSS 盒模型回顧

元素寬高計算包含：

content：內容區域（文字、圖片等）

padding：內距

border：邊框

margin：外距（不影響元素寬高，只影響外部間距）

  • 預設盒模型（content-box）
.tooltip-inner {
  width: 200px; /* 設定的是 content 寬度 */
  padding: 10px;
  border: 2px solid #000;
}

實際佔用寬度 = content + padding + border

計算：200 + 102 + 22 = 224px

所以即使你寫 width: 200px，實際顯示會比你預期寬。

屬性值

  1. content-box（預設值）

    • 寬度/高度只包含內容，不包含 padding 和 border。
    • 實際渲染寬度 = content 寬度 + padding + border
    • 這可能導致元素的實際大小超過設定值。

  2. border-box

    • 寬度/高度包含內容、padding 和 border。
    • 實際渲染寬度 = width 設定值
    • 這個值對響應式設計非常友好，能方便地控制元素的總寬高。

  3. padding-box（較少使用）

    • 寬度/高度包含內容和 padding，但不包含 border。
    • 這個屬性值的瀏覽器支援度有限。