Word Wrap in Css/Js

In CSS/JS, how to word-wrap at every nth word?

you need to specify the p width or put it within a container that has a defined width

p.longtext {    width:200px; }

<p class='longtext'>Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text </p>

word-wrap: break word; fix or alternative

As @Sfili_81 mentionned it

something like word-break: break-all;

Here you go

var txt = document.getElementById("demo").innerHTML;

var dataArr = txt.split(' ');

var paragraph = document.getElementById("demo");
var finalString = "";
for (var i = 0; i < dataArr.length; i++){
    if (dataArr[i].length > 6 ) {
      finalString = finalString + " <span>"+ dataArr[i]+"</span>"; 
  }
  else{
    finalString = finalString + " " + dataArr[i];
  }
}

paragraph.innerHTML = finalString;

div{
  width:50px;
  background: red;
 
}
span{
  word-break:break-all;
}

<div id="demo">test tIn CSS/JS, how to word-wrap at every nth word? word-wrap: break word; fix or alternative css word-wrap doesn't work to fit text into div JavaScript: How to add 'word-wreeest test test test</div>

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

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>

JavaScript: How to add 'word-wrap' style to element

Just use wordWrap instead word-wrap

tables = document.getElementsByTagName("TABLE");
for (i = 0; i < tables.length; i++)
    tables[i].style.wordWrap = 'break-word';

Style names in Javascript use camelCase. - is the arithmetic subtraction operator, it can't used in identifiers.

You could use bracket notation instead but it's not recommended

tables[i].style['word-wrap'] = 'break-word';

Wrap text using CSS for a button to display code with javascript interaction

Have you tried different values for white-space on the code and parent pre element? Seems to fix it right up for me.

CSS Word Break and Word Wrap is not working

It seems to work fine:

.txt {
  word-break: break-all;
  word-wrap: break-word;
  min-height:150px;
  max-width:150px;
  overflow-x: auto;
}

<div class="txt">
The company's revenue has been increasing for the last five years with an overall growth of 49% between 2015 and 2019. Revenue increased 7% to $426.4 million for the year ended December 29, 2019, as compared to $398.2 million for the year ended December 30, 2018. The increase was primarily driven by $28.5 million in incremental revenue from an additional 359 operating weeks provided by new restaurants opened during and subsequent to the year ended December 30, 2018 as well as an increase in its comparable restaurant sales. Net income increased by $0.7 million and 12% to $6.2 million for the year ended December 29, 2019 as compared to $5.5 million during the comparable period in 2018. This was due to the increase in depreciation and amortization costs, as well as the increase in income tax benefits. The company's cash equivalents at the end of 2019 totaled $10.1 million, an increase of $2 million from the previous year. Operating activities generated $43.4 million, while investing activities used $33.3 million. Financing activities used another $8.3 million primarily for common stock repurchases and line of credit payments.
</div>

Word Wrap detection in JavaScript

Here is a very basic implementation on how to detect when a line is wrapped hopefully this gives you a good idea where to start and integrate it into your app.

Heres the docs for stuff used

https://developer.mozilla.org/en/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

You mentioned the height changing and you needing to know when its wrapped you can use a mutation observer to check when the style has changed then check if its wrapped.

Resize the demo window to see results

any questions i'll try get to them asap if i've misunderstood i'll happily change :)

const h1 = document.querySelector('h1');const banner = document.querySelector('.banner');

//handles style changes on banner to check wrappingconst observer = new MutationObserver(mutations =>  mutations.forEach(mutationRecord => onLineWrapDoSomething()));observer.observe(banner, { attributes : true, attributeFilter : ['style'] });

// handles window resize eventswindow.addEventListener('resize', onLineWrapDoSomething)
function onLineWrapDoSomething() {  const { lineHeight } = getComputedStyle(h1);  const lineHeightParsed = parseInt(lineHeight.split('px')[0]);  const amountOfLinesTilAdjust = 2;
  if (h1.offsetHeight >= (lineHeightParsed * amountOfLinesTilAdjust)) {    console.log('your h1 now wrapped')  } else {    console.log('your h1 on one line')  }}
// shows it logs when style changes and it wraps, ignore the disgusting code belowsetTimeout(() => {  banner.style.width = '50%'  setTimeout(() => {    banner.style.width = '100%'  }, 1500)}, 1500)

.banner {  width: 100%;}h1 {  line-height: 1.5}

<div class="banner">  <h1>This is some text that will eventually wrap</h1></div>