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.
Related
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
Assuming I have a div with some text content inside. Now I want this text element to have a fixed height of, let's say, 200px. How do I make the width of this element, so that its contents always automatically fit the height perfectly without overflow.
Quick sketch of what I'm aiming for:
I already tried a lot of methods like using min-content, display: grid, or display: flexbox, but didn't find any working solution. It would be super helpful if any of you who have a clue, could give me a hint. Thanks.
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,
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%.
See link: bit.ly/Mh9PGJ
When I make my browser window smaller, eventually 'Commercial Management' is too big for its slider box and gets shifted about. The best solution I believe is to simply increase the overall height of the entire entity (including every slider) so that the text has more space. But for this to work I'm guessing you would need some kind of min-height property there.
My problem is that I've tried min-height on practically everything there and I end up with odd-looking results, like the content expands but the green sliders do not, etc.
Any solution at all to this problem would be amazing. Thank you!
possible solution can be
adding your h2 class to those attributes
white-space: nowrap;
text-overflow:ellipsis;
it is not the correct way but at least if you dont have enough space, you can simple finish the word with ...[3 Dots]