Wrap text in tag
HTML tables support a «table-layout:fixed» css style that prevents the user agent from adapting column widths to their content. You might want to use it.
I have attempted this solution, but it doesn’t seem to be working in Chrome. I have a table that is being filled dynamically with a hyperlink that is over twice the width of the cell. ‘table-layout:fixed’ solves the problem with the table stretching, but does not wrap the text; instead it is continuing to stretch off the right of the page. Am I missing something?
I believe you’ve encountered the catch 22 of tables. Tables are great for wrapping up content in a tabular structure and they do a wonderful job of «stretching» to meet the needs of the content they contain.
By default the table cells will stretch to fit content. thus your text just makes it wider.
1.) You can try setting a max-width on the TD.
2.) You can try putting your text in a wrapping element (e.g. a span) and set constraints on it.
Be aware though that older versions of IE don’t support min/max-width.
Since IE doesn’t support max-width natively you’ll need to add a hack if you want to force it to. There’s several ways to add a hack, this is just one.
On page load, for IE6 only, get the rendered width of the table (in pixels) then get 15% of that and apply that as the width to the first TD in that column (or TH if you have headers) again, in pixels.
use word-break it can be used without styling table to table-layout: fixed
without word-break
LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG
with word-break
LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG
The only solution that didn’t completely decimate the dimensions and text alignment of my cells—thanks
table-layout:fixed will resolve the expanding cell problem, but will create a new one. IE by default will hide the overflow but Mozilla will render it outside the box.
Another solution would be to use: overflow:hidden;width:?px
test
This worked for me with some css frameworks (material design lite [MDL]).
I had some of my td s with:
This way you do not have to fool around with fixed table widths, or complex css.
You might have meant to use CSS instead, but inline styles is generally avoided in modern HTML, especially if you’re repeating the same styles over and over for every copied div.
To make cell width exactly same as the longest word of the text, just set width of the cell to 1px
This is experimental and i came to know about this while doing trial and error
It’s possible that this might work, but it might prove to be a bit of a nuisance at some point in the future (if not immediately).
. . . some text some more text yet more text
I’d recommend using the title property of the span to show the text that’s present (or clipped) in the visual cell, so that the text’s still available (and if you don’t want/need people to see it, then why have it in the first place, I guess. ).
Also, if you define a width for the td <. >the td will expand (or potentially contract, but I doubt it) to fill its implied width (as I see it this seems to be table-width/number-of-cells ), a specified table-width doesn’t seem to create the same issue.
The downside is additional markup used for presentation.
Apply classes to your TDs, apply the appropriate widths (remember to leave one of them without a width so it assumes the remainder of the width), then apply the appropriate styles. Copy and paste the code below into an editor and view in a browser to see it function.
This is the left column. It is set to 20% width. Hi,
I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available.
Need help.
TIA.
This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.
HTML Correct way to wrap labels and fields
Is fieldset the correct tag? I wasn’t sure if you were supposed to use that for individual label and input pairs or for groups of them (e.g. all the Name inputs would be in a fieldset tag and all the favourites would be in another fieldset tag). I know I can use a DIV (as in my second example), but I am not sure if that is the best tag.
4 Answers 4
If more styles are required, you can use additional css styles for that
the formatting of code just hurt my eyes and I had to correct it. Now that it’s readable, one can clearly see that your labels are useless, they need ‘for’ attributes and inputs need ‘id’ attributes that labels can point to
There are several correct ways. You can wrap them in a div , or in a span , or inside cells of a table row. Other approaches are possible, too, but less natural. A fieldset element is for a group of controls and associated labels. A group with a single control is formally correct, but rather pointless. Neither div nor span has any meaning assigned to it, apart from constituting a block level or inline element, respectively. But since you probably want each control to start on a new line, div makes things simpler, as it has such rendering by default. A table element constitutes a grid of elements and is therefore a natural choice, because a collection of controls and associated labels logically forms a grid.
In any case, note that label elements as used in the example are rather pointless and provide no functional advantages. They should have for attributes that associate each of them with its control, by its id attribute.
Yes, you can use fieldset , in form it´s correct tag. (you don´t need that, regarding question edit).
Here are other options:
You can use whatever, not only fieldset (eg. div ). If you want to wrap all fields (and labels) together, use one fieldset . If you need to wrap each single pair, use div .
But, maybe you don´t need to wrap these pairs, only rearrange your HTML. What about this code?
You can make a grid using a float on label s (for example, if you want to have two pairs in one row), etc.
Wrapping text inside input type=»text» element HTML/CSS
is displayed in a browser like so:
When I add the following text,
it is displayed in a browser like so:
But I would like it to be displayed in a browser like so:
I want the text in my input element to wrap. Can this be accomplished without a textarea?
Using a textarea is sometimes not an option because you don’t want to allow input of multiple lines of text. Just to wrap a single line of text (Note: They are not the same thing).
There is a solution discussed for this exact purpose with the CSSWG for standardization, sadly I can’t find the issue though.
@Pekka웃 not that it is relevant, but some reasons include: we cannot use html5 validation on textareas; we cannot use pattern constraints to validate textareas; a textarea is an unnecessary synonym for an input type=text (it is an input that is type text!) which means twice the styling, etc, etc. In short there are many reasons.
Also it would be nice to be able to wrap input type=url element. Textarea would not provide the functionality (selection of appropriate keyboard and validating URL and maybe more).
5 Answers 5
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, ») .
This doesn’t really answer the question of how to collect a single line of input while displaying it wrapped during entry.
@alex Exactly. So if you want real multiline input, then a textarea is better, but if you just want word-wrapped input, then the css solution is better.
I was about to say that
As said above: Wrapping a line !== a multi-line string. I’m not sure why this is the accepted answer as it doesn’t answer the question.
Word Break will mimic some of the intent
As a workaround, this solution lost its effectiveness on some browsers. Please check the demo: http://cssdesk.com/dbCSQ
I just tested it in Firefox 43.0.4 and it doesn’t work however in Safari 9 and Chrome 48 it seems to work: cssdesk.com/dbCSQ
Forget about this solution: does not work with Chrome 74/75, Firefox 63/67, Edge 42, IE 11 and UCBrowser 7.0 (but works with GNOME Web 3.28 — AppleWebKit/605.1.15)
You can not use input for it, you need to use textarea instead. Use textarea with the wrap=»soft» code and optional the rest of the attributes like this:
Atributes: To limit the amount of text in it for example to «40» characters you can add the attribute maxlength=»40″ like this: To hide the scroll the style for it. if you only use overflow:scroll; or overflow:hidden; or overflow:auto; it will only take affect for one scroll bar. If you want different attributes for each scroll bar then use the attributes like this overflow:scroll; overflow-x:auto; overflow-y:hidden; in the style area: To make the textarea not resizable you can use the style with resize:none; like this:
NOTE: textarea works with rows unlike like input that is made to not work with rows at all.