Show all contents of span independent of size [duplicate]

Question

Show all contents of span independent of size [duplicate]

Navigation

#1 by (2 votes)

1

I have a problem when it comes to showing text on my screen:

I have a span tag with id="obsEmenda" that gets a varchar from the server:

<span class="progress-description">OBSERVA&Ccedil;&Atilde;O: <strong><span id="obsEmenda"></span></strong></span>

The text in this span is larger than the size of the container and does not show the rest. I wanted to find a way to break this text so that it all appears on the screen. Would it be the case of using a textarea? Picture of how it is:

Notice that it puts 3 points at the end due to some properties of the class 'progress-description'.

.progress-description {
    display: block;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html css

asked by anonymous 03.10.2018 / 20:56

1 answer

select distinct in temp table sql server Check if number is available within a defined range

score 2 · Accepted Answer

If you want the line to break you need to remove some things from your CSS like white-space: nowrap; and overflow: hidden;

Then you add the property word-break: break-all; to break the word, even if it is a big word like those "mmmmmmm" that I put in the example below

See how it looks in the example:

.progress-description {
    display: block;
    font-size: 14px;
    word-break: break-all;
}

<span class="progress-description">OBSERVA&Ccedil;&Atilde;O: 
    <strong><span id="obsEmenda">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, rerum. mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
    </span></strong>
</span>