How Can I Make Text Get Smaller In Order To Stay On One Line?

I have a the gets populated with text when a user fills out a field. If the text the user enters is bigger than my 200px wide , it wraps around and messes up my design.

Solution 1:

better you set maximum length of string, if it over the limit, just cut the text and add "... " text . place title in tag , so it can read completly when mouse over .

example : blabla bla bla bla ...

just short in visual text, and use title

Solution 2:

You can use ellipsis, this is CSS3 property, more info about this

tdp {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}