友善建議，發問時可以附上 codepen, jsbin 甚至是程式碼段落都可以幫助大家回答喔。
通靈一下...？
CSS 裡面有個 word-wrap 屬性可以控制文字要不要斷行
div {
word-wrap: break-word;
}
可參考 w3school
可以善用 max-width、min-width 等來控制最大最小縮放
.container {
max-width:250px;
min-width:100px;
width:100%;
}
如果是用 flex 縮放的話則有 flex-basis、flex-grow 可控制：
.container {
display: flex;
}
.component {
flex-basis: 100px;
flex-grow: 1;
flex-shrink: 0;
}
可參考這張作弊表
預設的換行，不會將單字強迫換行了。(保留單字完整性)
所以如果是需要單字強迫換行，就需要給與單字換行的特性
@ShawnL有說了，我就不在重覆。
不過其實還有其它方式，
另一種就是遮起來。使用 overflow 的特性。
當然什麼樣的情況適合。就得自行考量了。
iThome鐵人賽
看影片追技術