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;">Unternehmenskunde</div>
<div style="width: 200px; border: 1px solid red;">Unternehmenskunde</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.
span { display:block; width:150px; word-wrap:break-word;}
<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>
how to word wrap in normal html textbox?
How about this:
<p>Event Data:
<textarea id="data" style="width: 757px; height: 170px" rows="10" cols="80">{{data}}</textarea>
</p>
Hat tip (and +1) to Stewart for pointing out that rows
and cols
are required attributes to textarea
.
Related Topics
Link a .CSS File in Another Folder
How to Submit a Post Form Using the <A Href="..."> Tag
How to Change Color of Disabled HTML Controls in IE8 Using CSS
Multiple Spaces Between Words in HTML Without &Nbsp;
Why Use Protocol-Relative Urls at All
Weird Effect When Applying Transparent Border Over an Element with a Gradient Background
CSS Data Attribute New Line Character & Pseudo-Element Content Value
What Characters Are Allowed in the HTML Name Attribute Inside Input Tag
Local (File://) Website Favicon Works in Firefox, Not in Chrome or Safari- Why
Center Align Container and Left Align Child Elements
How to Add a "Search" Button in a Text Input Field
Is <Div> Inside <Label> Block Correct
What Is the Performance Impact of the Universal Selector
What Character Encoding Should I Use for a Web Page Containing Mostly Arabic Text? Is Utf-8 Okay
Flexbox Column-Reverse in Firefox, Edge and Ie
Borders Disappear in Chrome When I Zoom In
How to Make Div Element Auto-Resize Maintaining Aspect Ratio