Answered by:
Wrap h3 text with LESS CSS

Question
-
User416875641 posted
Hi,
I have IP address in small box, the address can be long, so I want to wrap it onto next line when small, but it doesn't work.
The targetting is working cause the h3 are all smaller, on reduced size screen.
But I want the text to stay the same size and wrap inside bounds of box, not sure why it won't do it.
@media (max-width: @screen-xs-max) {
.small-box {
text-align: center;
.floatimage{
display: none;
}
p {
font-size: 12px;
}
h3 {
/*word-wrap: break-word;
word-break: break-all;*/
word-wrap: break-word;
font-size:smaller;
}
}
}
Monday, December 2, 2019 2:29 PM
Answers
-
User665608656 posted
Hi AltFire,
When I use VW to test, there are some small issues. I just need to delete the height's css to implement it normally.
1VW = 1% * viewport width, so if it is 100%, you can change the width to 100vw for testing, and everything works fine(The result is the same as before).
<div class="small-box bg-white"> <div class="inner"> <p>Your IP Address</p> <img class="floatImage" src="../Images1/pic2.PNG" alt="audit risk" height="92" width="92" /> <div style="width:100vw; word-wrap: break-word;"> <h3>192.168.125.25ddddddddddddddddddddddddddddddddddddddddddddddddddddd3</h3> </div> </div> <a href="" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a> </div>
If this still can't solve your issue, please provide us with the detailed code of the VW you are currently using.
Best Regards,
YongQing.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Thursday, December 5, 2019 1:38 AM
All replies
-
User475983607 posted
The community cannot reproduce this issue without the markup or same values..
Monday, December 2, 2019 3:02 PM -
User-474980206 posted
the word wrap and break are only valid with a block elements, which the h3 is not.
Monday, December 2, 2019 3:18 PM -
User416875641 posted
mgebhard
The community cannot reproduce this issue without the markup or same values..
Markup:
<div class="small-box bg-white">
<div class="inner">
<p>Your IP Address</p>
<img class="floatImage" src="~/Content/images/57906transparent.png" alt="audit risk" height="92" width="92"/>
<p><h3>192.168.125.253</h3></p>
</div>
<a href="" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
</div>
Monday, December 2, 2019 3:59 PM -
User-474980206 posted
the h3 will only break if it is within a div with a width.
for example try:
<div class="small-box bg-white" style="width:40px;">
Monday, December 2, 2019 9:09 PM -
User665608656 posted
Hi AltFire,
As @bruce said, If you need to wrap the text in h3, you need to add a div with a fixed width or a percentage width to the outer layer.
You can follow this code :
<div class="small-box bg-white"> <div class="inner"> <p>Your IP Address</p> <img class="floatImage" src="../Images1/pic2.PNG" alt="audit risk" height="92" width="92" /> <div style="width:100%;height:100px; word-wrap: break-word;"> <h3>192.168.125.25ddddddddddddddddddddddddddddddddddddddddddddddddddddd3</h3> </div> </div> <a href="" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a> </div>
Here is the result when you resize your window :
Best Regards,
YongQing.
Tuesday, December 3, 2019 6:31 AM -
User416875641 posted
Unfortunally just didn't work for me, I had to add the VW viewport as well.Wednesday, December 4, 2019 6:47 PM -
User665608656 posted
Hi AltFire,
When I use VW to test, there are some small issues. I just need to delete the height's css to implement it normally.
1VW = 1% * viewport width, so if it is 100%, you can change the width to 100vw for testing, and everything works fine(The result is the same as before).
<div class="small-box bg-white"> <div class="inner"> <p>Your IP Address</p> <img class="floatImage" src="../Images1/pic2.PNG" alt="audit risk" height="92" width="92" /> <div style="width:100vw; word-wrap: break-word;"> <h3>192.168.125.25ddddddddddddddddddddddddddddddddddddddddddddddddddddd3</h3> </div> </div> <a href="" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a> </div>
If this still can't solve your issue, please provide us with the detailed code of the VW you are currently using.
Best Regards,
YongQing.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Thursday, December 5, 2019 1:38 AM