All geek questions in one place

How to make my text wrapping in a <div> with a large border radius

in the following code

<html>
<body>
<div style="height:400px; width:400px;  -moz-border-radius:100px; -webkit-border-radius:100px; border:3px solid #500;     background-color:#a00; overflow:hidden;">
Why is this getting cut at the beginning???
</div>
</body>
</html>

Why doesn't the browser wrap text around rounded corners. In webkit browsers (I tested both chrome and safari), overflow hides text outside the border. Firefox simply displays text overseas. I also tried this without overflow: hidden; but again text that just displays outside the border.

+3
source share
2 answers

Use the add-on to customize your content.

padding-left:20px;
padding-top:50px;

Therefore, it looks like ...

<div style="height:400px; width:400px;  -moz-border-radius:100px; -webkit-border-radius:100px; border:3px solid #500;     background-color:#a00; overflow:hidden;padding-left:20px;padding-top:50px;">
+3
source

if the radius of your borders is 100px / you should use this /

div.blabla{padding:36px;}

this is a good fill factor for a div with a border radius of 36% /

+1

Source: https://habr.com/ru/post/1748792/

More articles:


All Articles