CSS：防止文本溢出div元素

Question

我正在使用Bootstrap 4，並具有一個其中包含長文本的div 。 如果文本太長，它將使div溢出。

看起來像這樣 。

添加一個空格（導致較短的單詞）會使它看起來不錯。

像圖片中那樣長的單詞"hhhhhhhhhhhhhhhhhhh"將導致溢出。

我的代碼：

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="p-1 mt-4 d-flex flex-wrap"> <div class="p-1 m-1 d-flex flex-content-around shadow-lg p-2 mb-4 bg-white rounded box"> <div class="my-auto"> <img alt="pokemon pic" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/66.png" /> </div> <div class="p-1 d-flex flex-column"> <div class="p-0"> <h3>Macgoooooo</h3> </div> <div class="p-0 d-flex flex-column flex-wrap"> <div class="p-0"> <span>cought at</span> </div> <div class="p-0"> <small>2019-09-01</small> </div> </div> </div> </div> </div> 

我真的很想知道如何使文本適合flexbox。

Answer 1

使用overflow-wrap: break-word; 像這樣的^文檔 ：

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="p-1 mt-4 d-flex flex-wrap"> <div class="p-1 m-1 d-flex flex-content-around shadow-lg p-2 mb-4 bg-white rounded box"> <div class="my-auto"> <img alt="pokemon pic" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/66.png" /> </div> <div class="p-1 d-flex flex-column" style="display:inline-block; word-break: break-word;"> <div class="p-0"> <h3>Macgoooooo</h3> </div> <div class="p-0 d-flex flex-column flex-wrap"> <div class="p-0"> <span>cought at</span> </div> <div class="p-0"> <small>2019-09-01</small> </div> </div> </div> </div> </div> 

Answer 2

該代碼可以正常工作，但是如果仍然存在問題，則應嘗試以下操作在CSS中添加：

h3{
  word-break: break-all;
}

這將打斷所有長單詞，並將所有單詞保留在多行中，具體取決於單詞的長度。

Answer 3

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

對於width屬性，您需要使用框的寬度