css word-wrap doesn't work to fit text into div

Question

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>

using `word-wrap` breaks words, because there are no spaces as far as css is concerned it shouldn't wrap as it's a single word. The property you want to use is `word-break` as this will decide how to break a single word for the available space. — Aaron McGuire, Dec 02 '21 at 20:36

score 1 · Accepted Answer · answered Dec 02 '21 at 20:37

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>

css word-wrap doesn't work to fit text into div

1 Answers1