[英]CSS: Prevent text from overflowing div element
I'm using Bootstrap 4 and have a div
which has long text inside it. 我正在使用Bootstrap 4,并具有一个其中包含长文本的div
。 If the text gets to long, it overflows my div
. 如果文本太长,它将使div
溢出。
Adding a space (resulting in shorter words) results in it looking fine. 添加一个空格(导致较短的单词)会使它看起来不错。
Long words like "hhhhhhhhhhhhhhhhhhh"
will cause overflow, like it did in the picture. 像图片中那样长的单词"hhhhhhhhhhhhhhhhhhh"
将导致溢出。
My code: 我的代码:
<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>
I would really like to know how to make the text fit inside the flexbox. 我真的很想知道如何使文本适合flexbox。
Use overflow-wrap: break-word;
使用overflow-wrap: break-word;
Docs like this: 像这样的文档 :
<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>
The code works perfectly fine, but still if there still is issue, then you should try the following to add in your css: 该代码可以正常工作,但是如果仍然存在问题,则应尝试以下操作在CSS中添加:
h3{
word-break: break-all;
}
This will break any long words and will keep everything in multiple lines depending on the length of your word. 这将打断所有长单词,并将所有单词保留在多行中,具体取决于单词的长度。
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
for the width attribute, you need to use the width of the box 对于width属性,您需要使用框的宽度
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.