I am trying to make a table in HTML. When I resize the window down to be narrow and the window tries to squash everything to fit inside the window even though it's narrow, it puts the contents of a cell on different lines. I don't want this to happen. E.g.:
home about contact us
when you narrow down the browser window:
home about contact
us
This is really annoying. I have tried putting instead of a space where the space is, but it didn't help. Does anyone know the solution?
Try adding CSS attribute of white-space to the <td> elements of the table. In particular, <td style='white-space: no-wrap;'>
You can use for this. That way the browser sees it as one word.
td { white-space:nowrap; }
What do you expect?
Say the window becomes smaller so that the cell also becomes smaller than to fit contact us completely, then do you expect The "extra" content to be hidden? The size of the cell never become smaller than a fixed-minimum?
You need to use width ad height along with overflow (overflow). overflow:hidden will hide the content that is more than the width (provided a height is given)
Related
I would just like a div, in the center of the page, that contains one line (two words) of h1 text, and that text is justified to the length of the div; meaning, the letters space out (while maintaining their size) to occupy the entire width of the div, and do not go outside the div. And, if I change the browser settings to shorten the width of the page (such as zoom in), the letters will condense (to a point, before breaking up to two lines).
I cannot realistically list all the things I have tried, to no avail. Which includes all the suggestions I have seen on this site to date.
Is it really that complicated? Or am I just missing something obvious?
Please, please help.
I apologize for the "subjective nature" of this request.
So you want the font size to change depending on window width?
In CSS, you can use the vw unit for font-size, so that would respond to the window width, but requires some trial-and-error, I guess.
Apart from that, there's a javascript plugin named fittext (http://fittextjs.com/) which does what you want. I used it on one website and it works quite reliably,
eg: my table height and width is 10:10. When i entered some paragraph inside table, unexpectedly the width(50) is increasing. Please give me solution for avoid that things.
In my case, if i'm aware of how text inside a in a table are rendered, i put them inside a . You got, together with CSS, complete control of the text.
<table style="background-color:#ccc;">
<tr>
<td><div style="width:20px;height:20px;">'randomtext</div></td>
</tr>
</table>
Above snippet gives you a static box whatever you put into the div-tag. If you intend to hide the characters that not fit in the size, just add overflow:hidden.
<div style="width:20px;height:20px;overflow:hidden;">'randomtext</div>
You may also use the table-layout:fixed; CSS attribute to the <table style=''> tag to achieve same effect. overflow:hidden give you same effect with table-layt, as in a DIV. I will point out avoiding the use of tables in design purposes (DIV's are the element for this). However I also will beg-pardon if I don't understand the question correctly. Your question could, at this time, be much more clear.
A side note,
If we say the example with a square height of 10 x 10 pixels. When you type in a ' or something, the table are grow. Probably in height but maybe also in width depend on font-style. The <div> can override this. Even if the character are visibly smaller, like as a quote mark, there are space reserved for a box around a full size of that chosen size, font-face and encoding.
How can I wrap the text displayed in the browser to either the width of the browser or a specified width, whichever is less?
I have been putting text inside <table width='850'> to wrap at a specific point, so if the user maximizes their browser on a gigantic monitor a whole paragraph doesn't fit in a single line. But when the user makes the browser super narrow, the above method causes text to carry over the edge of the viewable area. Not what I want exactly.
So, I'm looking for a better approach.
Oh, maybe I should add that my pages are extremely simple. There aren't banners up and down the left or right sides of them. Just text and images occupy the space from the left border of the browser to the right. Boring stuff.
EDIT - I accepted an answer, but I did find an issue (and a solution that seems to work) with the accepted answer when used with Internet Explorer. I spent half an hour trying to get max-width to work, but just couldn't. Every other style property worked fine though. Then I discovered this http://svendtofte.com/code/max_width_in_ie which said I had to use the following for max-width to work in IE, and it did: p { width:expression(400 + "px"); }. I don't understand why the fiddle example worked with max-width on IE, but not my page. Maybe it's cuz I include my css in my html page?
You could set the max-width property in your css.
That way, the page will expand until a certain point and then no more.
Example:
.mainDiv{
max-width:700px;
}
Working example: http://jsfiddle.net/Pa5JG/
More info on max-width: http://reference.sitepoint.com/css/max-width
Just use max-width. See this fiddle.
Basically its a 2 column setup, with a dynamic width content column, and a static width menu column.
The content column is going to contain pre-tags (with code), and I need overflow:auto on the pre-tag inside the table to work.
So far I've had little luck. The nature of the pre tag forces a certain size on the table cell, which in turn refuses to be any smaller than the width of the pre tag.
Can anyone help out?
Ps. I've placed a second pre-tag on the page, which works as intended, but thats probably because it's not inside a table.
Add white-space: pre-wrap; to the element. max-width:100% may help too.
I found an acceptable solution.
The solution is a negative right margin for the pre (code) element.
Basically, a negative right margin will force the pre to shrink if it needs to.
I made margin-right -800px, and the width 97%.
I noticed that the width, paddings and borders need tweaking if to look good at all resolutions, but the solution works.
A simple solution that was hard to dream up.
[EDIT]
There was a link to an example, but it has been taken down.
I'm building a tab bar in css, and want it to be able to handle having more tabs than can be shown on the screen. My HTML is structured roughly:
<div id="tabbar">
<div id="tablist"></div>
</div>
css:
#tabbar {position:absolute;width:100%;height:24px;overflow:hidden;}
#tablist {position:absolute;top:0px;left:0px;height:24px;}
div.tab {float:left;}
with all tabs inserted into #tablist. So long as the there are few enough tabs that they don't overflow, #tablist shrinkwraps correctly and I can get their collective widths. However, as soon as there are more than can fit on the screen, they wrap to the next line (though you can't see it, obviously, due to #tabbar's overflow:hidden), and #tablist's width ceases to accurately represent the total widths of the tabs.
I could set #tablist's width through javascript manually, adding the total widths of each tab, but this seems an awfully messy and error-prone approach. I could also use a table, but I'd rather not since it violates the whole css-for-layout theory.
What I'm looking for, in essence, is a means to shrinkwrap a div around its contents without its contents being wrapped to a second line due to the width of the div's parent.
EDIT: The purpose of this is to build a tab bar which allows the user to scroll when there are too many tabs, but in order to do that I need to know when the width of #tablist, or the total widths of all tabs, is greater than the width of #tabbar, so that I can activate the 'scroll right' button. I also need to know the exact width, not just the fact that it's wider, so that I know how far it should be able to scroll.
From what I understand, you want to keep the tabs on one line even if they're not shown on the screen, perhaps you'll be scrolling them? I could be wrong, but if I'm correct - you can simply set a big enough width on #tablist to float all tabs, which will then be hidden by the parent (#tabbar) overflow:hidden.
#tablist {width: 10000px}