locked
Wrap h3 text with LESS CSS RRS feed

  • 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