1

whenever user zoom the screen two values gets overlapped with each other. kindly help me out for this.

without zooming it looks perfectly fine. kindly help me out for this.

below is my HTML code

<div class="slds-is-relative slds-col slds-size_5-of-12 slds-float_right ">
    <section if:true={opt.checked} class="slds-popover slds-nubbin_left" role="dialog">
        <div class="slds-popover__body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.</p>
        </div>
    </section>
</div>
<div class="slds-is-relative slds-col slds-size_5-of-12 slds-float_right ">
    <section if:true={opt.checked} class="slds-popover slds-nubbin_left" role="dialog">
        <div class="slds-popover__body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.</p>
        </div>
    </section>
</div>
<div class="slds-is-relative slds-col slds-size_5-of-12 slds-float_right ">
    <section if:true={opt.checked} class="slds-popover slds-nubbin_left" role="dialog">
        <div class="slds-popover__body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.</p>
        </div>
    </section>
</div>
<div class="slds-is-relative slds-col slds-size_5-of-12 slds-float_right ">
    <section if:true={opt.checked} class="slds-popover slds-nubbin_left" role="dialog">
        <div class="slds-popover__body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.</p>
        </div>
    </section>
</div>
0

1 Answer 1

0

Add slds-truncate to your wrapper elements to force ellipses to appear when the text is too large to fit its area. It is generally advisable to add a title to those elements so the entire text can be seen when hovered over with the mouse.

Example:

<div class="slds-truncate" title="Stuart Upifen=htyfudiuigj">
  Stuart Upifen=htyfudiuigj
</div>

Result:

Output

2
  • do we have any option to truncate if screen size is more then 80%?
    – SryukTim
    Sep 12, 2020 at 18:23
  • 1
    @SryukTim That question doesn't really make sense. What are you trying to accomplish?
    – sfdcfox
    Sep 12, 2020 at 19:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .