How to make a dynamic text responsive to the container size
Question
I want to make sure that the div container holds the text inside it without leaking any text outside. How can I make it responsive to grow or shrink the container size depending upon the dynamic text?
.element { display: inline-block; text-indent: 15px; background-color: #0074d9; width: 120px; margin-right: 5px; /* left and right margin of flex elements inside this element container */ margin-left: 5px; animation: roll 3s infinite; transform: rotate(30deg); opacity: .5; } @keyframes roll { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
<div class="element"> <p>Welcome!</p> <p>${user_name}</p> <p>${user_email}</p> <p>${user_contact} </p> </div>
3 answers
solution1
2 2018-08-28 19:03:50
faize check this https://jsfiddle.net/kdrbh1Lw/10/ add this css rules to element class.
- flex-wrap: wrap height: auto width: max-content
when dynamically adding new data element container should expand both vertically and horizontally.
.element { flex-wrap: wrap; text-indent: 15px; background-color: #0074d9; height: auto; width: max-content; margin-right: 5px; margin-left: 5px; animation: roll 3s infinite; transform: rotate(30deg); opacity: .5; } @keyframes roll { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="element"> <p>welcome</p> <p>${user_name}</p> <p>${user_email}</p> <p>${user_contact}</p> <p>${new_data}</p> <p>long long long long long long text</p> </div> </body> </html>
solution2
1 ACCPTED 2018-08-28 19:04:48
As mentioned in the comments, your problem here is that the text is wrapping because you gave its parent container a set width of 120px. If you A) ditch the width or B) give it a min-width of 120px, you will get it to resize to accommodate longer names.
.element { display: inline-block; background-color: #0074d9; min-width: 120px; margin-right: 5px; margin-left: 5px; padding: 0 10px; animation: roll 3s infinite; transform: rotate(30deg); opacity: .5; } @keyframes roll { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
<div class="element"> <p>Welcome!</p> <p>Someguy Longlastname</p> <p>${user_email}</p> <p>${user_contact} </p> </div>
solution3
1 2018-08-28 19:04:53
How about the following. Using min-width you can specify a width it should definitely have but it can grow as much as it wants. If you don't like that you could also set a max-width .
.element { display: inline-block; padding: 15px; /* gives equal spacing around */ background-color: #0074d9; min-width: 120px; margin-right: 5px; /* left and right margin of flex elements inside this element container */ margin-left: 5px; animation: roll 3s infinite; transform: rotate(30deg); opacity: .5; } .element p { margin: 0 0 10px 0; } .element p:last-of-type { margin: 0; } @keyframes roll { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
<div class="element"> <p>Welcome!</p> <p>${user_name}</p> <p>${user_email}</p> <p>${user_contact} </p> <p>rory mcCrossan</p> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.