Trim Text with "..." if it is too long - css

I have a div of certain size. Now whenever data is coming to that div from database, the excess length of the text is coming down as wrap text (like MS Excel). I want it to be in one line and obviously within the div. End the line with "..."
Can anyone help me to do so using css.
Thanks in advance


You can use this:
text-overflow: ellipsis;
It will render '...' if it is too long.
Reference: http://www.w3schools.com/cssref/css3_pr_text-overflow.asp
Edit: Thanks to AndyM's comment, you can also use white-space:nowrap to handle white spaces overflow:hidden to prevent text overflow.


Try this:
text-overflow: ellipsis;
word-wrap: nowrap;

Related

Why is this text going out of the div bounds

I'm not sure what is going on here. I've tried changing the display, position, width and max width of both elements.
How do I get this text to make a new line on its own?

you have added white-space: nowrap for g please remove it or add white-space: normal

It's probably not wrapping now because of the white-space: nowrap rule. Try removing or overriding that.

Child Div Breaking its Parent's Div

I have spent hours trying to prevent one of my child divs from breaking its parent's div.
Link: http://bowenhost.com/wordpress/
Screenshot:
It's the saddads widget / div that keeps breaking.
Feel free to inspect element / firebug on your web browsers to find a solution.
Thanks in advance guys. I really appreciate it!

the content is with out spaces. so it is treated as single word. give some sentence with space between the words and check
If you want to break the word which has no spaces you can use word wrap of css3
.textwidget {
word-wrap: break-word;
}

It will break to a new line if there is a space. But if there is no space you could look into using these CSS properties.
Word Wrap - word-wrap: break-word;, https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
Word Break - word-break: break-all;, https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
Make sure to check the compatability on those pages.

you just make some two new classes for your HTML than it will work perfectly see below how i achieved your desired result....and one thing more with this just add spaces between your content also... so you will have to give the space between the content....
make these two classes for your HTML
CSS
.widget-inner {
overflow: hidden;
}
.textwidget {
white-space: pre-wrap;
}
see the attached demo image you will get a basic idea how i did

Adding line breaks with no word wrap css

I have a css class on a textarea like this..
.expanderHTMLText{
font: 12px Arial, Helvetica;
min-height: 50px;
white-space:nowrap;
}
I do not want words to break in between long words, but I do want the text to fill the box not be all on 1 line with a scroll bar. I want to get rid of the horizontal scroll but not have to break the words to do it. How do I accomplish this?

Remove white-space:nowrap; line and it will not be on one line.
Edit:
Who down-voted me? Please give me an explanation for that.
white-space: nowrap; explicitly defines, that wrapping will not occur. The only way how text can be wrapped is by removing or changing this property.
Default value for white-space property is normal, which acts almost identically to nowrap except it will wrap the text (collapse spaces).
If you do not want to words (even long ones) to be split on multiple lines, you will need to add word-wrap: normal; as JSW189 suggested.
But then you would still get a horizontal scrollbar if you would have a word which does not fit on one line - but thats obvious, you will either have word on multiple lines, either scrollbar.

Want to wrap text into div in jquery mobile

I have problem to display long text into div they have no space.I want to display this text into next line.

Solution
I have used css word-wrap:break-word and it solved my problem.

Use the following CSS in the right place and you'll have what you need...
white-space: normal;

Making html content unbreakable (in one line)

I have a line made of inputs and spans which should represent a phone number. Inserting it into a table with some columns with content causes the line to break:
The last input is pushed into the next line. One way to fix this could be setting a fixed td width or min-width. However, for the sake of any future projects I would like to know is there a way to make the html content unbreakable without touching the td width. Thanks for any info.

Add this CSS to the td
white-space: nowrap;
This prevents the automatic line-breaking of HTML. For more info see MDN

add
white-space: nowrap;
to your css

Using white-space: nowrap should get the job done.

In bootstrap it's a class text-nowrap.

Resources