Issue
<div class="card" style="width: 150%;" style="display:table;">
<div class="card-header" style="display:table;">
<p class="display-4 bold" style="font-size: 30px;">Voici la transcription et traduction :</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item" style="display: inline-block;">
ADN
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1" style="font-size: 15px;display: inline-block;">{{ generationdata[0] }}</span>
</div>
</li>
<li class="list-group-item" style="display: inline-block;">
ARN
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1" style="font-size: 15px;display: inline-block;">{{ generationdata[1] }}</span>
</div>
</li>
<li class="list-group-item" style="display: table;width: fit-content; ">
Protéine
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1" style="font-size: 15px;display: inline-block;width: fit-content; ">{{ generationdata[2] }}</span>
</div>
</li>
</ul>
</div>
This is what I get but I would want the content to be displayed on another line if too long for the div width:
Solution
I believe adding this to your css would fix your issue
.list-group-item {
word-wrap:break-word;
}
alternatively you could add word-wrap:break-word;
to each individual style of the spans
Answered By - Blye
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.