Hide text when it does not fit within the div [duplicate]

Question

Hide text when it does not fit within the div [duplicate]

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I have a div with the following class c-txt , note that when the text does not fit inside it, the text is summarized with three dots (...).

I need to do this with the div txt to avoid breaking the buttons.

Does anyone know how to do this?

I tried to do this:

.container-footer .txt {
    float: left;
    margin-top: 15px;
    display: inline-block;
    white-space: nowrap;
   overflow: hidden !important;
   text-overflow: ellipsis;
}

But the 3 dots do not appear. Follow my code.

Could an alternative be to use jQuery?

.container {
    left: 0;
    right: 0;
    margin: 10px auto 10px auto;
    width: 95%;
    border-radius: 4px;
    background: #FFFFFF;
}
.container table {
    width: 100%;
    margin: 0 auto;
}
.container .linha {
    border-top: 1px solid #D7D7D7;
}
.container-head {
    width: 100%;
    color: #FFFFFF;
    border-radius: 4px 4px 0 0;
    height: 65px;
    background: #000;
    line-height: 65px;
    display: flex;
}
.container-head .c-ico {
    width: 5%;
    min-width: 60px;
}
.container-head .c-ico .material-icons {
    padding: 20px;
}
.container-head .c-txt {
    width: 75%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
.container-head .c-bt {
    width: 20%;
    min-width: 140px;
}
.container-head .c-bt button {
    margin-top: 12px;
    margin-right: 20px;
    border: 0;
    width: 100px;
    height: 42px;
    cursor: pointer;
    border-radius: 4px;
    color: #FFFFFF;
    float: right;
}
.container-head .c-menu {
    width: 20%;
    min-width: 100px;
}
.container-head .c-menu .overflow-menu {
    z-index: 1;
    margin-top: 20px;
    max-width: 24px;
    float: right;
    margin-right: 40px;
}
.container-head .c-menu .overflow-menu ul {
    margin-top: -5px;
}
.container-body {
    padding: 20px;
}
.container-body .notification {
    margin-left: -20px;
    margin-right: -20px;
}
.container-body .row {
    margin-left: 0px;
    margin-right: 0px;
}
.container-body .tab-content {
    margin-left: -15px;
    margin-right: -15px;
}
.container-body .tabs {
    margin-left: -20px;
    margin-right: -20px;
}
.container-body-scroll {
    overflow: auto;
    height: 319px;
    text-align: left;
}
.container-footer {
    border-top: 1px solid #D7D7D7;
    height: 50px;
    padding-left: 10px;
    padding-right: 10px;
}
.container-footer button {
    margin-top: 7px;
    border: 0;
    height: 35px;
    min-width: 36px;
    cursor: pointer;
    border-radius: 4px;
    color: #FFFFFF;
    float: right;
}
.container-footer .txt {
    float: left;
    margin-top: 15px;
    
}
/* Mobile */
@media only screen and (max-width: 900px) {

    .container.w50 {
        width: 80%;
    }
}
@media only screen and (max-width: 600px) {

    .container.w50 {
        width: 95%;
    }
}

<!-- Container Button -->
        <div class="container">

            <!-- Container Head -->
            <div class="container-head">
                <div class="c-ico"></div>
                <div class="c-txt">TÍTULO CONTAINER BUTTON orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida et elit et mattis. </div>
                <div class="c-bt">
                    <button type='submit'>FINALIZAR</button>
                </div>
            </div>
            <!-- Container Footer -->
            <div class="container-footer">
                <div class="txt">
                    TEXTO 1 orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida et elit et mattis. orem ipsum dolor sit.
                </div>
                <button type='button'>OK</button>
            </div>
            <div class="container-footer">
                <div class="txt">
                    TEXTO 1
                </div>
                <button type='button' class="bg-green-2-houve">OK</button>
            </div>
            <div class="container-footer">
                <div class="txt">
                    TEXTO 1
                </div>
                <button type='button' class="bg-red-2-houve">OK</button>
            </div>
            <div class="container-footer">
                <div class="txt">
                    TEXTO 1
                </div>
                <button type='button' class="bg-blue-2-houve">OK</button>
            </div>
            <div class="container-footer">
                <div class="txt">
                    TEXTO 1
                </div>
                <button type='button' class="bg-yellow-2-houve">OK</button>
            </div>
        </div>

html css css3

asked by anonymous 05.07.2017 / 20:00

3 answers

Numbers below average Applying the scroll in table keeping the header fixed

score 1 · Answer 1

Just missing the size of the div (.container-footer .txt)

puts it like this:

.container-footer .txt {
 float: left;
 margin-top: 15px;
 width: 75%;
 display: inline-block;
 white-space: nowrap;
 overflow: hidden !important;
 text-overflow: ellipsis;
 }

score 1 · Answer 2

Modified patch:

.container-footer .txt {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

Without white-space: nowrap; which is the property that defines the behavior of line breaks, the text-overflow property: ellipsis does not work. white-space: nowrap - does not break line at all.

This% CSS property of% does not force an overflow to occur. For this to happen, the author needs to use some additional properties in the element, such as setting the overflow property to hidden. Read more here

I also had to change the top margin of the button to text-overflow: ellipsis;

.container {
left: 0;
right: 0;
margin: 10px auto 10px auto;
width: 95%;
border-radius: 4px;
background: #FFFFFF;
}
.container table {
width: 100%;
margin: 0 auto;
}
.container .linha {
border-top: 1px solid #D7D7D7;
}
.container-head {
width: 100%;
color: #FFFFFF;
border-radius: 4px 4px 0 0;
height: 65px;
background: #000;
line-height: 65px;
display: flex;
}
.container-head .c-ico {
width: 5%;
min-width: 60px;
}
.container-head .c-ico .material-icons {
padding: 20px;
}
.container-head .c-txt {
width: 75%;
display: inline-block;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
.container-head .c-bt {
width: 20%;
min-width: 140px;
}
.container-head .c-bt button {
margin-top: 12px;
margin-right: 20px;
border: 0;
width: 100px;
height: 42px;
cursor: pointer;
border-radius: 4px;
color: #FFFFFF;
float: right;
}
.container-head .c-menu {
width: 20%;
min-width: 100px;
}
.container-head .c-menu .overflow-menu {
z-index: 1;
margin-top: 20px;
max-width: 24px;
float: right;
margin-right: 40px;
}
.container-head .c-menu .overflow-menu ul {
margin-top: -5px;
}
.container-body {
padding: 20px;
}
.container-body .notification {
margin-left: -20px;
margin-right: -20px;
}
.container-body .row {
margin-left: 0px;
margin-right: 0px;
}
.container-body .tab-content {
margin-left: -15px;
margin-right: -15px;
}
.container-body .tabs {
margin-left: -20px;
margin-right: -20px;
}
.container-body-scroll {
overflow: auto;
height: 319px;
text-align: left;
}
.container-footer {
border-top: 1px solid #D7D7D7;
height: 50px;
padding-left: 10px;
padding-right: 10px;
}
.container-footer button {
margin-top: -26px;
border: 0;
height: 35px;
min-width: 36px;
cursor: pointer;
border-radius: 4px;
color: #FFFFFF;
float: right;
}

.container-footer .txt{
white-space: nowrap; 
overflow: hidden;
text-overflow: ellipsis; 
margin-top: 15px;
width: 90%;
}

/* Mobile */
@media only screen and (max-width: 900px) {

.container.w50 {
    width: 80%;
}
}
@media only screen and (max-width: 600px) {

.container.w50 {
    width: 95%;
}
}

 <div class="container">

            <!-- Container Head -->
            <div class="container-head">
                <div class="c-ico"></div>
                <div class="c-txt">TÍTULO CONTAINER BUTTON orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida et elit et mattis. </div>
                <div class="c-bt">
                    <button type='submit'>FINALIZAR</button>
                </div>
            </div>
            <!-- Container Footer -->
            <div class="container-footer">
                <div class="txt">
                    TEXTO 1 orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida et elit et mattis. orem ipsum dolor sit.
                </div>
                <button type='button'>OK</button>
            </div>
            <div class="container-footer">
                <div class="txt">
                    TEXTO 1
                </div>
                <button type='button' class="bg-green-2-houve">OK</button>
            </div>
            <div class="container-footer">
                <div class="txt">
                    TEXTO 1
                </div>
                <button type='button' class="bg-red-2-houve">OK</button>
            </div>
            <div class="container-footer">
                <div class="txt">
                    TEXTO 1
                </div>
                <button type='button' class="bg-blue-2-houve">OK</button>
            </div>
            <div class="container-footer">
                <div class="txt">
                    TEXTO 1
                </div>
                <button type='button' class="bg-yellow-2-houve">OK</button>
            </div>
</div>

Example of how the screen shrinks in width

score 0 · Answer 3

Well I'm answering my own question, because based on the previous answers I managed to get the result I wanted.

.container {
    left: 0;
    right: 0;
    margin: 10px auto 10px auto;
    width: 95%;
    border-radius: 4px;
    background: #FFFFFF;
}
.container table {
    width: 100%;
    margin: 0 auto;
}
.container .linha {
    border-top: 1px solid #D7D7D7;
}
.container-head {
    width: 100%;
    color: #FFFFFF;
    border-radius: 4px 4px 0 0;
    height: 65px;
    background: #000;
    line-height: 65px;
    display: flex;
}
.container-head .c-ico {
    width: 5%;
    min-width: 60px;
}
.container-head .c-ico .material-icons {
    padding: 20px;
}
.container-head .c-txt, .container-footer .c-txt {
    width: 75%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
.container-head .c-bt, .container-footer .c-bt {
    width: 20%;
    min-width: 140px;
}
.container-head .c-bt button {
    margin-top: 12px;
    margin-right: 20px;
    border: 0;
    width: 100px;
    height: 42px;
    cursor: pointer;
    border-radius: 4px;
    color: #FFFFFF;
    float: right;
}
.container-head .c-menu {
    width: 20%;
    min-width: 100px;
}
.container-head .c-menu .overflow-menu {
    z-index: 1;
    margin-top: 20px;
    max-width: 24px;
    float: right;
    margin-right: 40px;
}
.container-head .c-menu .overflow-menu ul {
    margin-top: -5px;
}
.container-body {
    padding: 20px;
}
.container-body .notification {
    margin-left: -20px;
    margin-right: -20px;
}
.container-body .row {
    margin-left: 0px;
    margin-right: 0px;
}
.container-body .tab-content {
    margin-left: -15px;
    margin-right: -15px;
}
.container-body .tabs {
    margin-left: -20px;
    margin-right: -20px;
}
.container-body-scroll {
    overflow: auto;
    height: 319px;
    text-align: left;
}
.container-footer {
    border-top: 1px solid #D7D7D7;
    height: 50px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 50px;
    display: flex;
}
.container-footer .c-txt {
    width: 80%;
}
.container-footer button {
    margin-top: 7px;
    border: 0;
    height: 35px;
    min-width: 36px;
    max-width: 130px;
    cursor: pointer;
    border-radius: 4px;
    color: #FFFFFF;
    float: right;
}
/* Mobile */
@media only screen and (max-width: 900px) {

    .container.w50 {
        width: 80%;
    }
}
@media only screen and (max-width: 600px) {

    .container.w50 {
        width: 95%;
    }
}

 <!-- Container Head -->
            <div class="container-head">
                <div class="c-ico"></div>
                <div class="c-txt">TÍTULO CONTAINER BUTTON</div>
                <div class="c-bt">
                    <button type='submit'>FINALIZAR</button>
                </div>
            </div>
            <!-- Container Footer -->
            <div class="container-footer">
                <div class="c-txt">TEXTO 1 f s fg dsg dfgdsg fgds g dsg sd g dfsg dfs g dfsgds</div>
                <div class="c-bt">
                    <button type='submit'>OdfsgdsfK</button>
                </div>
            </div>
            <div class="container-footer">
                <div class="c-txt">TEXTO 1</div>
                <div class="c-bt">
                    <button type='submit'>OK</button>
                </div>
            </div>
            <div class="container-footer">
                <div class="c-txt">TEXTO 1</div>
                <div class="c-bt">
                    <button type='submit'>OK</button>
                </div>
            </div>
            <div class="container-footer">
                <div class="c-txt">TEXTO 1</div>
                <div class="c-bt">
                    <button type='submit'>OK</button>
                </div>
            </div>
            <div class="container-footer">
                <div class="c-txt">TEXTO 1</div>
                <div class="c-bt">
                    <button type='submit'>OK</button>
                </div>
            </div>
        </div>