Show all span content regardless of size

Asked

Viewed 61 times

1

I have a little problem showing a text on my screen:

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

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

The text of this span is exceeding the container size and does not show the rest. I wanted to find a way to break this text so that it appears all on the screen. Would it be the case to use a textarea? Picture of how you are: inserir a descrição da imagem aqui

Note 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

  • include the relevant part of the CSS, as well as the container that is hiding the overflow

  • The container is that first span

  • Got it, so the css of #Progress-Description and #obsEmenda

  • I’ll put the css of this class

1 answer

2


If you want the line to break you need to remove some things from your CSS like the 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 these "mmmmmmmmmmm" 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>

  • show bro, thanks ;)

  • @Mayconf.Castro tmj young! Be sure to take a look at the links cited in the comments, there are other variations for the use of this property that can help you in the future!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.