1

I have a little problem, text inside tags doesn't wrap (I don't use <p> and write text in <div>).

HTML is very simple, but I can't solve the problem:

<template>
    <div class="slds-grid slds-grid_align-center">
        <lightning-card class="slds-size_1-of-3">
            <div class="slds-m-around_medium">
                <h1 class="slds-text-align_center">Card question</h1>
                <div>adwadwwdawdwadwadawdawdawdawddwawdadwdawdawdwadadwdadawdwdadwadawddawdwadawdadawd</div>
                <div class="slds-m-top_small slds-align_absolute-center">
                    <button class="slds-button slds-button_destructive">Show</button>
                    <button class="slds-button slds-button_success">Next</button>
                </div>
            </div>
        </lightning-card>
    </div>
</template>

enter image description here

1 Answer 1

4

You just need to add CSS to wrap the text.

overflow-wrap: break-word;

define a class in CSS file

.wrapped-content{
    overflow-wrap: break-word;
}

And add this class to the div.

<template>
    <div class="slds-grid slds-grid_align-center">
        <lightning-card class="slds-size_1-of-3">
            <div class="slds-m-around_medium">
                <h1 class="slds-text-align_center">Card question</h1>
                <div class="wrapped-content">adwadwwdawdwadwadawdawdawdawddwawdadwdawdawdwadadwdadawdwdadwadawddawdwadawdadawd</div>
                <div class="slds-m-top_small slds-align_absolute-center">
                    <button class="slds-button slds-button_destructive">Show</button>
                    <button class="slds-button slds-button_success">Next</button>
                </div>
            </div>
        </lightning-card>
    </div>
</template>

You must log in to answer this question.

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