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;
}
}
}

Answer 1

User475983607 posted

The community cannot reproduce this issue without the markup or same values..

Answer 2

User-474980206 posted

the word wrap and break are only valid with a block elements, which the h3 is not. 

Answer 3

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>

Answer 4

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;">

Answer 5

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.

Answer 6

User416875641 posted
Unfortunally just didn't work for me, I had to add the VW viewport as well.

Answer 7

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.