I have a sidebar with a display name and the problem is if the user name is too long it will go beyond the container. I tried to use Jquery FitText but it doesn't seem to do what i want unless i'm doing something wrong. Function to resize is always called even if i change browser window size and the container where the name is didn't change anything. Is there a way to make the text fit the container without going beyond it?
This is actually possible with pure CSS.
Here is a great article: https://css-tricks.com/viewport-sized-typography/.
UPDATE
The issue with using pure CSS is that the text will always fit the viewport. The following custom solution only changes the text size if it overflows the containing box: jsfiddle.net/0swbytek
Related
I have a container (width 100%, height 100%, so it fills the screen, if that matters). I have a bit of text, but I don't know what it is; it could be a single word or a few lines. Is it possible to use pure CSS to set the font-size to something so that the text could be as big as possible without wrapping, overflowing, or having the user scroll? If not, what's the easiest way to do so using JS?
Because I don't know what the text is, I can't use vw or vh.
There is a jQuery plugin that can do the job easily for you, it's called FitText.
A sample script will look like this.
`jQuery("h1").fitText(0.38);`
You can check the source for more solutions than jQuery.
I have a div that I want to not resize with the browser window. I can't set the width or give it a min-width because it does need to resize with its contents. I simply want it to ignore the browser size completely and size normally to its contents. Seems pretty simple but I've been searching for days and been unable to find a solution to this.
Any ideas? I'm looking for an html/css solution not javascript. I already have a javascript hack that works but I'd rather not do this.
A div full of content won't be wider than the browser width by default unless, for example, there is an image in there that is wider. That will cause horizontal scroll. If you want it to be wider, you can give a width like 150%.
So, I'm working on coding my first site. It's a lot of googling for hours, then putting down the code, but I'm struggling through it, and enjoying it. However, I have a problem I've been unable to solve.
I am trying to get a div that fills the whole page by default, but that also expands when text goes past the "100%" height. I've tried using the two seperate divs to accomplish it, and it's worked. However, I am trying to use a semi-transparent div, meaning I can't stack two on top of each other, or else part of it (the "height:100%") becomes solid, while the other part (the div that expands to fit the text) is still semitransparent. Is there any way to make a div fill the remainder of the page from the point it starts? So that that way it could fill from the bottom of the 100% height to the rest of where the text fits? I would just space it using a margin-top characteristic, but the pages need to be elastic and be able to grow with the content. Sorry if this doesn't make sense.. It's hard for me to explain it without examples and being able to point. Haha.
I believe the CSS property you would want to use in this instance is min-height. If you give an element a min-height, even if the content is smaller than the min-height, it will render at that value. If the content is larger than the min-height, then it will expand to fit the size of the content.
I am making a site in HTML, and I am putting a heading on top of an object. When I shrink the window enough, the object and the text interfere
Is there any way I can have the text just stay in one spot without it wrapping to the browser window if there is no space left in the browser?
I have tried using fixed as a position property in CSS, but the same thing happened.
If you set an explicit width on the containing object (perhaps a <div> tag) it will not resize with the window. When the window becomes too small, it will not wrap around like you mentioned but force a scroll bar to appear.
I'm not sure what you mean by ending lines. If you're talking about wrapping, have you considered a fixed size DIV with overflow:hidden as a CSS rule?
I'm working on a web page where I have a dynamically generated table where certain columns should be of variable width (sizing to the text) and certain columns must always be a specific width. However, the table is inside of a containing div, and firefox is resizing the table such that it stays within the confines of the div. The trouble is, it resizes the columns that must remain a specific width.
Is there any way to force those columns to remain the same size, thus forcing the table to overflow from the div? The div has overflow: auto, which allows you to still see the table, and this is the effect that I am trying to achieve.
Thanks.
You might try styling it with overflow: visible; You could also try floating it, but that opens a whole other can of worms that you probably don't want.
I have several encounters with this problem, I couldn't find a best way to have what I want to display to be displayed/aligned to my needs. Especially so for width of the columns with dynamic text.
Instead of tackling it head-on, I use another approach. I tried to limit the number of characters (variable font-wdith still an issue, need to tweak around) to be displayed on a fixed width column. I'll then add tooltip (via title attribute or tooltip plugins) when mouseover those truncated text.
This is not a direct answer to your requirement, just offering another alternative.