I have a table with auto layout which has strings inside <td> and some of them may be long so i would prefer to wrap them to avoid too long horizontal display. I tried both apply the style to <td> or put <div> around the elements for this but couldn't get it to work properly. I observed the following:
In order to have any text wrapping at all, the white-space property has to be set to one of its wrapping values such as pre-wrap, normal, pre-line, etc. If instead white-space is set to any non-wrapping value such as pre, wrapping doesn't happen no matter what values i use for overflow-wrap or break-word properties. Even if i set max-width, the text just overflows.
If I set white-space to a wrapping value, such as pre-wrap, the wrapping happens but it wraps too much: I guess it tries to auto-size the column to its minimum possible width and then wraps accordingly. E.g. if the column header has only 2 characters, it wraps after each 2 characters and i see my strings broken into multiple lines 2-character long, which certainly does not look good. Note that my table does have a lot of columns, so maybe that's why it chooses to auto-size column width like this.
What I would prefer is to simply wrap after certain width is reached, but not before, e.g. start wrapping if it exceeds 30 characters. Is there a way to do this (short of breaking strings manually in code)? Note that i tried max-width but it didn't work as i mentioned above (depending on white-space value, it either overflows or starts wrapping at min possible width).
The only thing that did work, sort of, is setting min-width (together with the wrapping value of white-space property, in which case it didn't size the column or wrap to smaller than that value. However, this is not exactly what I want: some column values may be short and i don't want to create unnecessary space in this case. If the column values are short (such that no wrapping is needed) i would prefer to size to content (btw, i tried using min-content and fit-content, but it didn't work, still the same behavior).
Note that for an unrelated reason, setting table-layout to fixed is not an option for me.
Related
I have a line of copy that is managed in a Content Management System. The CMS will not allow HTML or special characters like or <span>.
I've tried messing with margins and padding, but can't get anything to give me the intended result.
This is how the text is being rendered:
<h1>This is an example of the headline.</h1>
I want to prevent a widow (a lone word that appears at the bottom of a block of text) so when the line does break, it treats the last 2 words as 1 word.
For example, "the headline" would break to the next line instead of just "headline" all alone.
Is there a way to do this in CSS alone?
I would love to see "white-space: no-widow" in CSS, but that doesn't exist.
Short answer: no, there's no way to do this that i know of.
if you could wrap those last two words in a span with a no-wrap style on it that might work. But I see you can't add a span in your CMS.
One thing you could do:
set the width of the h1 in em units, so that its width is proportionate to the size of the text. This way you can set a width that forces the title to break where you want it to, and that width will scale with the text.
I am trying to create an input mechanism using the flex box model. I know it's not supported by all browsers, but that doesn't matter in this case. It really only needs to work on web-kit browsers.
I am trying to build a nice two column layout without needing to use specific widths. I have the flex property set to one on both the label and the input. However, as you can see, when the label element gets long, it messes up the width of the input that is next to it.
I want both label and input to be the same width down the column, but I want them to grow and shrink as the size of the window/device changes.
Is there a way to do this without having to set a width on either of the elements?
Update
I can set a max-width on the label elements to 5% and I basically get the desired effect. However, I'm still wondering if there is a way to do this without setting any width and using purely the flex box?
Here is a working jsFiddle.
The example you provided doesn't have columns at all, just the appearance that there are columns. Without actual columns you will have to set widths to make these 3 unreleated blocks look they are joined in some way.
You should be using the new CSS3 Flexible Box syntax, which is now 'flex' rather than 'box'. See the spec: http://www.w3.org/TR/css3-flexbox/ With this you can set the elements to have a <grow> <shrink> <default width> of 1 1 50%, so they will grow and shrink at the same rate and will each take up 50% of available width (you can adjust this or make it 60/40 or whatever).
Example JSFiddle: http://jsfiddle.net/XTa98/4/
Otherwise, if you want actual columns so that you don't have to set widths, you need to wrap all of the labels in their own "column" div and all of the inputs in their own "column" div.
JSFiddle: http://jsfiddle.net/XTa98/5/
This has actual columns and no widths set, but it does not degrade gracefully anymore since the elements are not in their own rows. To alleviate this you could always provide text-overflow: ellipses to truncate the text.
In any case, you have a trade-off. If you want the appearance of columns without actually using columns, you will need to set some type of width. Otherwise, you can use real columns but the elements are no longer joined as rows and you will need to account for the overflow when shrinking the browser width.
You don't have to wrap the elements in column divs to avoid setting widths. Just set each label and input to flex:1, and you'll get them dividing up the width equally. However, this is effectively just the same as setting each to be 50% wide, in this case, so I'm not sure what advantage it really has.
How do to remove Auto Resize of Table cell? When I enter a text that would exceed the width of a table cell it automatically increases its width. Is there a way to disable its auto resize?
I'm directly adding text in table cell without any other element than <td>,
<td>Text is Here...</td>
Is there an element when the text exceeds the <td>'s width it will auto end line the next word. is that possible? I tried <p> and it doesn't work for me.
This is a sample:
http://jsfiddle.net/88RtG/2/
I want the first cell to have same width all the others regardless of its contents.
Browsers apparently expand a cell no matter what (even table-layout: fixed does not help), if the cell contains a string of characters that cannot be broken by the rules that the browser is applying.
If a string like “asdasdasdasdasdasddasdasdadasd” has no permissible breaking points, then it seems that the only way is to wrap the cell content in an element, say <td><div class=cell>...</div></td> and set a width on that inner element. You would then have to deal with the overflow issue (should the excess content flow into the next cell, or be hidden, or what?).
If it has permissible breaking points, mark them, using <wbr> or (More info on this: http://www.cs.tut.fi/~jkorpela/html/nobr.html#suggest ) for simple line break opportunities, for hyphenation points.
Specify the width to the table, row or the cell.
Try:
<td width="80px">Text is Here...</td>
Alter the width on all the cells of the ones you want - only need to do it on the first row. You can use percentages as well.
I'm facing a rather difficult issue at the moment; really appreciate your help.
I have a table with 2 columns, td1 and td2, and containing texts and both of which have fixed widths.
td1.width = 10px and td2.width = 20px
the fixed width are set at runtime one by one from the left using JQuery (as this table is nested inside another table...)
The text width may be longer than these fixed widths in which scenarios the expected behaviour is that
the fixed width of the columns should stay the same 1) if there are extra texts, the text should wrap, it should not increase or decrease the td width 2) if there are empty spaces, the cell width should not be reduced when resizing other columns or page; it should stay intact.
I have set the td.whitespace property to pre-wrap and td.word-wrap: break-word but they haven't helped.
how would these be possible using css 2.0 (not 3.0)?
Thanks,
In this case, because the widths are so small, and the text doesn't typically have words that small, it has no way to wrap them, so it extends the width of the td even with a set width!
It decreases the width of the second td because the first is using an extra width.
Also, you could have a situation where the text is so wide (a long word for example) and in that case there is no way to wrap it. Unless using javascript, IMO it is the only way.
I recommend reading this answers: HTML TD wrap text
ok, I got it resolved. My table had thead and colgroups. Althought their display attribute was hidden, IE 9.0 ignores it whereas IE 6.0 takes them into account in calculating the width of columns!
I removed them using jquery and sorted out!
$('.myTable thead, .myTable colgroup').remove();
If the name is like "david" it comes within the allotted space....
but if the name is like "john pal abraham desouza" the allotted space increases automatically..
So i need to have the name occupied in the allotted space by auto resizing the font..
Suggest me a solution..
You can use jQuery to check the length of the string and guess at a suitable font-size, check the rendered width and then adjust again if necessary.
As #Kieran says above, it's not going to be fool-proof - if a name is very long the font-size will be really small. Also, if there are no spaces in a long name, then the text won't wrap over two lines. However, that's a bit of an edge case.
Use a hidden dummy div to do the checking
By using a hidden (using visibility: hidden) and absolutely positioned div with same font CSS settings and copied content, you can easily change font sizes and check div width. When it exceeds certain size you can use the last valid value on your original div. This will avoid visual change of your fonts and content repositioning and recalculation so it will work faster. This will also avoid problems with long non-spaced words.
The same question has already been asked and answered.