0
339
Visualizaçõescss word-wrap doesn't work to fit text into div
css word-wrap doesn't work properly to wrap text inside div, it will work if i don't use javascript but combined with my JS code the text will go outside my border
This is the result im looking for:
const quotes = [
{
text: '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
},
{
text: '222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222',
},
]
const text = document.querySelector('.text');
function randButton() {
let random = Math.floor(Math.random() * quotes.length);
text.innerHTML = quotes[random].text;
}
randButton();.example-1 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
background: white;
border-style: solid;
border-radius: 5px;
padding: 3px 3px 3px 3px;
width: 425px;
}<div class="example-1" >
<div id="wallet_btc" class="text example"> </div>
</div>
<br>
<button onclick="randButton()" id="aaa" class="btn btn-primary a55" value="button" type="button" style="font-size:18px">Random</button>
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
You can get rid of all of your flex items and simply do word-break: break-all; like this:
const quotes = [
{
text: '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111'
},
{
text: '222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'
},
];
const text = document.querySelector('.text');
function randButton() {
let random = Math.floor(Math.random() * quotes.length);
text.innerHTML = quotes[random].text;
}
randButton();.inner-style {
background: white;
border-style: solid;
border-radius: 5px;
padding: 3px 3px 3px 3px;
width: 425px;
word-break: break-all;
}<div class="style1" >
<div id="wallet_btc" class="text inner-style"> </div>
</div>
<br/>
<button onclick="randButton()" id="aaa" class="btn btn-primary a55" value="button" type="button" style="font-size:18px">Random</button>
·
Juan Pablo Isaza
Relatório
Responde à pergunta