html - CSS:防止文本溢出div元素

Question

我使用的是 Bootstrap 4，并且有一个 div，里面有很长的文本。如果文本变长，它会溢出我的 div。

看起来像this .

添加一个空格(导致单词变短)使其看起来不错。

像 "hhhhhhhhhhhhhhhhhh" 这样的长词会导致溢出，就像图片中那样。

我的代码:

<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

代码运行良好，但如果仍然存在问题，那么您应该尝试将以下内容添加到您的 css 中:

h3{
  word-break: break-all;
}

这将打破任何长单词，并根据单词的长度将所有内容保留在多行中。