How to create a responsive text container | Sololearn: Learn to code for FREE!

+6

How to create a responsive text container

I got a squarely div that must be a fixed size, how do i make the innerText responsive relative to the div's size and irrespective of the text's length. You can see from the second div that the text overflow across the horizontal axis, i'd like to fix this so it always stay within the div size and centered on both axis.. It may loses the font size scaling https://code.sololearn.com/WFar64qN6mdf/?ref=app

9/24/2021 3:34:48 PM

Runtime Terror

17 Answers

New Answer

+3

The number that you wrote It in the second div is considered as one word (not a group of words) so, the text will never wrap to fix this, you can set: word-wrap: break-word; Such as the edited code below: https://code.sololearn.com/WmFIm18T69i9/?ref=app

+8

Runtime Terror[ Busy ] try this in css https://code.sololearn.com/WXqigqXwlEVL/?ref=app

+5

https://code.sololearn.com/W18QQGo2hBdw/?ref=app

+5

Runtime Terror[ Busy ] to make a website responsive i will highly recommend use padding ,margin , height and width value in percentage , or use min max width and height To overcome with text overflow u can use word-break property not recommend : width: 90px; height: 90px;

+4

Runtime Terror[ Busy ] You can get solution here https://webdesign.tutsplus.com/tutorials/text-overflow-with-css-ellipsis--cms-36634 https://youtu.be/dRGi2iBuOIo

+2

Runtime Terror[ Busy ] I think you are looking for something like this given all details some width (based on text) = same height responsive based on text inside box https://code.sololearn.com/WZkVL01E6O1g/?ref=app

+2

Runtime Terror[ Busy ] i am not talking only about the creating website but to make a simple container responsive u need this . Don't give the fixed height and width to a container giving a fixed width or height means not more than that nor less than which is not good to make responsive Giving percentage value or Using max -width and min-width will help

+2

https://code.sololearn.com/WG2qA9xTMtQD/?ref=app https://code.sololearn.com/WNqp5tlW934L/?ref=app

+1

I'll look into that A͢J - S͟o͟l͟o͟H͟e͟l͟p͟e͟r͟

+1

Runtime Terror[ Busy ] have a look on BroFar code he haven't given any fixed width and height height:20px; width:30px; He use some min-width and height

+1

https://code.sololearn.com/WnhWmKSOa3s6/?ref=app

+1

Thanks everyone who's tried to help, Clean<Code> solution solved the problem

0

rupali pls read my question and it's description carefully

0

Time To Code it's not actually a website but a web game. I dont really know the use and logic behind the margin-padding properties in css has i'm just entering into web after spending most years writing in C++ but for some reasons, the use of "padding", "margin" etc always don't fit in web games cos it has to be pixel perfect. I'm not sure if this rules is universal cos my css skill is like 5%

0

SAN your solution does not really answer the question, for example. If the div is 90px, the 90px must not change but if the text inside it overflows, then the text should be displayed such that it's always within the 90px range

0

Brofar solved 50% of the answer. The text are well clamped on the x-axis but the div automatically adjust to fit on the y-axis. The container should be a square of the minimum dimension. In other words: const a = Math.min(width, height) containerWidth = a; containerHeight = a;

0

https://code.sololearn.com/W4W6tN4x7493/?ref=app Check out my new Website Design With html, css and javascript