How to Word Wrap Text in Html

How to word wrap text in HTML?

Try this:

div {
width: 200px;
word-wrap: break-word;
}

word wrap text in div

Well maybe you want to try something like this?

.scrolls .product .details .liProductName {
max-width: 150px;
border: 1px solid red;
overflow-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Otherwise maybe you want something like this:

.scrolls .product .details .liProductName {
max-width: 150px;
word-break: break-word;
border: 1px solid red;
}

This would do the job, also did do the changes in the codesnippet below.

.scrolls {  display: inline-block;  overflow-x: scroll;  overflow-y: hidden;  border: solid transparent;  width: 60vw;}
.scrolls .product { display: inline-block; border: solid transparent; width: 30%; height: 240px;}
.scrolls .product .details { width: 100%; height: 100%; font-size: 15px; display: inline-block; float: left; height: 100%;}
.scrolls .product .details ul { width: 100%; height: 100%; list-style: none; padding: 0; margin: 0;}
.scrolls .product .details .liProductName1 { max-width: 150px; word-break: break-word; border: 1px solid red;}
.scrolls .product .details .liProductName2 { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid red;}
<div class="scrolls">  <div class="product" ng-repeat="i in products track by $index" align="center">    <div class="details">      <ul>        <li class="liProductName1"> Portable 20000mAh USB Power Bank LED LCD For Cell Phone External Battery</li>        <li><img style="width: 90px; height: 120px;" data-ng-src="{{img}}" /></li>        <li><button id="addItemBtn" class="btn btn-default" ng-click="addItem(i.productId)">Add</button></li>      </ul>    </div>  </div></div>
<div class="scrolls"> <div class="product" ng-repeat="i in products track by $index" align="center"> <div class="details"> <ul> <li class="liProductName2"> Portable 20000mAh USB Power Bank LED LCD For Cell Phone External Battery</li> <li><img style="width: 90px; height: 120px;" data-ng-src="{{img}}" /></li> <li><button id="addItemBtn" class="btn btn-default" ng-click="addItem(i.productId)">Add</button></li> </ul> </div> </div></div>

Wrapping text inside input type= text element HTML/CSS

That is the textarea's job - for multiline text input. The input won't do it; it wasn't designed to do it.

So use a textarea. Besides their visual differences, they are accessed via JavaScript the same way (use value property).

You can prevent newlines being entered via the input event and simply using a replace(/\n/g, '').

How do I wrap words at a defined position?

Thanks to @GrumpyCrouton I found a solution for an arbitrary word wrap.

The solution is to use either a soft hyphen (­) if you want to have a hypen in case of a word wrap How to word wrap text in HTML?:

<div style="width: 120px; border: 1px solid red;">Unternehmens­kunde</div>

<div style="width: 200px; border: 1px solid red;">Unternehmens­kunde</div>

How can I wrap or break long text/word in a fixed width span?

You can use the CSS property word-wrap:break-word;, which will break words if they are too long for your span width.