This is seriously a generic question, and I'm not able to paste the code in here for trouble-shooting so apologies for that in advance.
My question, to which I have googled endlessly this afternoon, but clearly I lack google-fu power here ... is that is there any particular reason why text would display in a vertical line in a HTML table?
I've tried like everything ... this is for a HTML email btw, tried white-space: pre-wrap;, white-space: nowrap;, etc ...
Obviously white-space: nowrap; is not an optimal solution ... and nothing else works!
I cannot for the life of me figure out why, why, why does the text display in a single line?!?!?!?
Yes. Make sure that you have a width set on your table columns - either fixed or percentage based. Also wrap your text inside of the cells in <p> tags if possible. Otherwise the columns will collapse to the narrowest possible width, which in your case is the width of a single character.
On my webpage I've used fancybox for preview section of description text in popup. Text shows perfectly fine on desktop but on popup it shows something like this.
Please note that the descriptive text I'm getting for the display it include for each space user gives for the sentence after each word.
and when I use word-break: break-all; it gets like this
then I've used word-break:break-word; also and get this
you can spot the difference now, that it breaks word viz clearly not acceptable. I want to break sentences meaningfully not the word!
Problem is I can only use HTML/CSS only here for fixing this, have looked many que/ans here but no luck.
Please help me into this.
I've created a JSFiddle please look into this may be this will help to understand clearly.
Note: If you don't want to modified server side scripts, you can use this JavaScript solution instead. I don't think you can do so with CSS only without doing any amendments in your server side code to remove these &nbps;.
In that case, you should first decode HTML special chars to simple text using following JavaScript code.
var text = $("<textarea/>").html('your HTML encoded text here with and all').text();
$('your viewing div/p selector').html(text);
And add this CSS property in your viewing div or p.
white-space: pre-wrap;
It should work.
Use word-wrap:break-word;
It even works in IE.
There are many possible values of the css "word-break" property.
http://www.w3schools.com/cssref/css3_pr_word-break.asp
word-break:break-word;
https://jsfiddle.net/1acbtr82
word-break:keep-all;
https://jsfiddle.net/dabros/1acbtr82/1/
The first works fine but does break up "googling" into "googlin-g", the second refuses to even do that.
I've got a simple textarea in a form and for some reason when I click in the textarea to begin to type, it centers the first line. I can hit backspace until it lines up at the start of textarea but I don't know why it's doing that. I've Googled and can't seem to find a reason why it would do this. Here is my jsfiddle for it:
http://jsfiddle.net/4cVkn/
I've tried text-align:left in numerous places (inline HTML and CSS) and it doesn't seem to change anything. It seems like it should be a simple fix, thanks for the help.
It isn't centred, it just has a default value of a series of space characters.
Put </textarea> immediately after the start tag instead of filling it with whitespace.
The default content of a text area is the content between its tags. Your source has something like:
<textarea name="bio">
</textarea>
so the initial value of the text area is the newline and the spaces used for indentation – the characters you can backspace over.
To get rid of them, close the tag immediately:
<textarea name="bio"></textarea>
Aside: the kind of form layout you're going for should probably be done using tables – at least until the various shiny new CSS3 layouts are better supported. Your avoiding them actually made the code less readable what with all the <br/>s.
I've already figured out that Firefox's sizing of textareas is buggy - it always adds one to your rows and cols settings. But I've decided to just ignore that. The problem is that Firefox also refuses to put in the vertical scrollbar, even if I type a friggin' short story into the box.
Am I doing something wrong (i.e. invalid)? Is there a workaround?
<textarea rows="1" cols="35" name="Cmnt1"></textarea>
(I want to use a one-row textarea instead of an input type=text precisely because the latter doesn't provide scrollbars. All the other browsers will give you a vertical scrollbar even on a one-row textarea.)
Note that this field will almost always contain just a single line of text, but it needs to accept more "just in case". A text input field is less than satisfactory (<-- understatement) because it always hides the overflow. In every other browser, a single-row textarea works exactly as I want. I vehemently disagree that what I want is a usability problem. Unfortunately, the way it behaves in Firefox is a usability problem.
Edit: turns out there's a bug with my installation of Firefox. :/
I know this is really old, but I have a similar issue and found the answer to your question in the process. Playing with a jsfiddle ( http://jsfiddle.net/z8btg/1/ ) in firefox revealed that the vertical scrollbar is only visible if there is room to display both the up and down arrow graphics. (Click on the little resize icon and make it small / big.) For me, the sweet spot is 34 pixels.
What I am trying to do:
I need the textarea to be one line until the textarea is focused, then I change it to a larger (popout style) textarea.
Try setting the overflow css property to "scroll". For example:
<textarea rows="1" cols="35" name="Cmnt1" style="overflow: scroll;"></textarea>
Edit: Sorry, should be overflow-y: scroll.
Focus on the textarea, hit the return key.
This sounds like a pretty terrible idea, by the way.
I used something like this to present a html link to visitors, needed to fit into the design and usability is just fine for it's intended function:
<input type="text" name="linkHTML" id="linkHTML" style="width: 95%;" value='YOUR TEXT CONTENT' onfocus="this.select()" onclick="this.select()" />
Set width as needed (% or px).
On click will highlight for copy.
Try setting the height of the textarea to 1em with CSS (which means one line-height unit) and set the rows to a higher value.
I am using Firefox 2.0. The scrollbar on the textarea does not show up until the height of the textarea is 32px (which is about two lines of text). If the height is less than that the scrollbars disappear -- probably because there is not enough room to show the arrow icons.
I have the following textarea in a table:
<table width="300"><tr><td>
<textarea style="width:100%">
longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring
</textarea>
</td></tr></table>
With a long string in the textarea, the textarea stretches out to accommodate it in one line in IE7, but retains its 300px width in other browsers.
Any ideas as to how to fix this in IE?
Apply the width to the td, not the table.
EDIT: #Emmett - the width could just as easily be applied via CSS.
td {
width: 300px;
}
produces the desired result. Or, if you're using jQuery, you could add the width through script:
$('textarea[width=100%]').parent('td').css('width', '300px');
Point being, there's more than one way to apply a width to a table cell, if development constraints prevent you from applying it directly.
#Peter Meyer, Jim Robert
I tried different overflow values, to no avail.
Experimenting with different values for the wrap attribute and the word-wrap style also wasn't fruitful.
EDIT:
#dansays, seanb
Due to some awkward application-specific constraints, the width can only be applied to the table.
#travis
Setting style="word-break:break-all;" sort of worked! It still wraps differently in IE7 and FF. I'll accept this answer if nothing better comes up.
Another hacky option, but the only option that works for me - none of the other suggestions on this page do - is to wrap the textarea in a single cell table with a fixed table layout.
<table style="width:100%;table-layout:fixed"><tr><td>
<textarea style="width:100%">longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring</textarea>
</td></tr></table>
Another very hacky option, if you are stuck with a lot of constraints, but know what the surrounding dom will look like:
style="width:100%;width:expression(this.parentNode.parentNode.parentNode.parentNode.width +'px')"
not pretty, but does work in IE7.
Using jquery or similar would be a much neater solution, but it depends on the other constraints you have.
did you try...
overflow: hidden;
??
I'm not sure if it should be in the table of the textarea... experiment a bit
IE also supports the word-break CSS 3 property.
The overflow property is the way to go. In particular, if you want the extra text to be ignored, you can use "overflow:hidden" as a css property on the text.
In general, when a browser has an unbreakable object, such as a long string without spaces, it can have a conflict between various size constraints - those of the string (long) vs its container (short). If you see different behavior in different browsers, they are just resolving this conflict differently.
By the way, there is a nice trick available for long strings - the <wbr> tag. If your browser sees longstringlongstring, then it will try to fit it in the container as a single, unbroken string -- but if it can't fit, it will break that string in half at the wbr. It's basically a break point with a implicit request to not break there, if possible (sort of like a hyphen in printed texts). By the way, it's a little buggy in some versions of Safari and Opera - check out this quirksmode page for more.
I've run into this problem before. It's related to how HTML parses table and cell widths.
You're fine setting 300 as a width as long as the contents of the element can never exceed that (setting a div with a definite width inside and an overflow rule is my favorite way).
But absent a solution like the above, the minute ANY element pushes you past that width, all bets are off. The element becomes as wide as it has to to accommodate the contents.
Additional tip - encase your width values in whatever set of quotes will nest the value properly (<table width='300'). If someone comes along and changes it to a %, it will ignore the %, otherwise.
Unfortunately, you're always going to have trouble breaking strings that do not have 'natural' breaks in IE, unless you can do something to break them up via code.
For solve this issue you use space in your text,and you too use this code
overflow:hidden
Give the width in pixels.this should work properly
or, how about:
overflow: scroll;
Edit:
I actually tested this. I think the behavior is such because the width is on the table, which I believe (I have nothing to back this up) I read long ago that the table width is a suggested width, but can be expanded to accommodate its content. Not sure. I know if you use a <DIV> rather than a table, it works. Additionally, if you apply the 300 pixel width to the containing <TD> element as opposed to the <TABLE> element, it works as well. Also, the overflow: scroll does nothing! :P
Nice, funky IE behavior, for sure!
Best thing I could find to make it work, a little hacky:
wrap textarea with <div style="width:300px; overflow:auto;">
might want to play around with the overflow value