Text-Überlauf Ellipse funktioniert nicht richtig

-1

Ich habe kürzlich meine Newsticker auf eine CSS-Version geändert. Mein Problem ist das Ich versuche den "Text-Überlauf: Ellipse" zu verwenden und es funktioniert einfach nicht. Ich habe versucht, die Stile überall ohne Erfolg zu platzieren. Kann mir jemand helfen? Ich habe einen grundlegenden Codepen erstellt. Die Klasse in GRÜN ist mein Problem.Text-Überlauf Ellipse funktioniert nicht richtig

https://codepen.io/lepew/pen/pdwNaL

body { 
 
    background-color: black; 
 
} 
 

 
#page_Wrap { 
 
    /* Flexbox setup */ 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    xflex-flow: column nowrap; 
 
    -webkit-flex-flow: column; 
 
    -moz-flex-flow: column; 
 
    -ms-flex-flow: column; 
 
    flex-flow: column; 
 
    /* Basic styling */ 
 
    width: 94%; 
 
    margin: 0 auto; 
 
    max-width: 1280px; 
 
    border: 1px solid red; 
 
} 
 

 
header { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-box-flex: 0; 
 
    -moz-box-flex: 0; 
 
    -ms-flex: 0; 
 
    -webkit-flex: 0; 
 
    flex: 0; 
 
    min-height: 100px; 
 
} 
 

 
#head_Logo, 
 
#head_Note { 
 
    -webkit-box-flex: 0; 
 
    -ms-flex: 0 0 77px; 
 
    flex: 0 0 77px; 
 
    width: 77px; 
 
    height: 90px; 
 
    border: 1px solid yellow; 
 
} 
 

 
#head_Area { 
 
    -webkit-box-flex: 2; 
 
    -ms-flex: 2; 
 
    flex: 2; 
 
    -webkit-flex-flow: column nowrap; 
 
    -moz-flex-flow: column nowrap; 
 
    -ms-flex-flow: column nowrap; 
 
    flex-flow: column nowrap; 
 
    min-width: 0; 
 
} 
 

 
.wrap_News { 
 
    height: 45px; 
 
    border: 1px solid lime; 
 
} 
 

 
.news_Area { 
 
    color: #0FF; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    xmargin-right: 115px; 
 
    xright: 0; 
 
    xleft: 116px; 
 
    opacity: 0; 
 
    -moz-opacity: 0; 
 
    filter: alpha(opacity=0); 
 
} 
 

 
.news_Text { 
 
    padding: 0 5px; 
 
    font: bold 18px Arial, Helvetica, sans-serif; 
 
    height: 45px; 
 
    overflow: hidden; 
 
    line-height: 45px; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.wrap_News:hover .news_Area { 
 
    -webkit-animation-play-state: paused; 
 
    -moz-animation-play-state: paused; 
 
    -o-animation-play-state: paused; 
 
    animation-play-state: paused; 
 
} 
 

 
.news_Area:nth-child(1) { 
 
    -webkit-animation: cycle 15s 0s infinite linear; 
 
    -moz-animation: cycle 15s 0s infinite linear; 
 
    -o-animation: cycle 15s 0s infinite linear; 
 
    animation: cycle 15s 0s infinite linear; 
 
} 
 

 
.news_Area:nth-child(2) { 
 
    -webkit-animation: cycle 15s 5s infinite linear; 
 
    -moz-animation: cycle 15s 5s infinite linear; 
 
    -o-animation: cycle 15s 5s infinite linear; 
 
    animation: cycle 15s 5s infinite linear; 
 
} 
 

 
.news_Area:nth-child(3) { 
 
    -webkit-animation: cycle 15s 10s infinite linear; 
 
    -moz-animation: cycle 15s 10s infinite linear; 
 
    -o-animation: cycle 15s 10s infinite linear; 
 
    animation: cycle 15s 10s infinite linear; 
 
} 
 

 
@keyframes cycle { 
 
    0% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    31% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-moz-keyframes cycle { 
 
    0% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    31% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-webkit-keyframes cycle { 
 
    0% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    31% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-ms-keyframes cycle { 
 
    0% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    31% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-o-keyframes cycle { 
 
    0% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    31% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
}

<div id="page_Wrap"> 
 

 
    <header> 
 
    <div id="head_Logo"> 
 
    </div> 
 
    <!-- end of #head_Logo --> 
 

 
    <div id="head_Area"> 
 

 
     <div class="wrap_News"> 
 
     <div class="news_Area"> 
 
      <div class="news_Text">This is top secret.&nbsp;&nbsp;<a href="#">Read more</a></div> 
 
     </div> 
 
     <!-- end of #news_Area --> 
 
     <div class="news_Area"> 
 
      <div class="news_Text"> 
 
      This is to see what happens if a lot of text is placed here and is just blah blah blah blah blah blah. 
 
      </div> 
 
      <!-- end of #wrap_News --> 
 
     </div> 
 
     <!-- end of #news_Area --> 
 
     <div class="news_Area"> 
 
      <div class="news_Text">Part 3 here</div> 
 
     </div> 
 
     <!-- end of #news_Area --> 
 
     </div> 
 
     <!-- end of #wrap_News --> 
 

 

 

 
    </div> 
 
    <!-- end of #head_Area --> 
 
    <div id="head_Note"> 
 
     <!-- HERE --> 
 
    </div> 
 
    <!-- end of #head_Note --> 
 
    </header> 
 
    <!-- end of #header --> 
 

 

 
</div> 
 
<!-- end of #page_Wrap -->

Quelle

2017-11-13 user3344341

Bitte senden Sie eine [MVCE] (https://stackoverflow.com/help/mcve) und nicht nur den gesamten Code Dump hier drin. Wir müssen derzeit 5 Sekunden warten, um Ihr Problem für 5s zu sehen. – SourceOverflow

Ohne 'width'' text-overflow: * 'wird nicht funktionieren. – Rahul

Sie benötigen einen width oder ein max-width setzen eine effiziente text-overflowund auch die direkte Mutter gesetzt in position:relative;haben, so ist es die Referenz den Raum zu berechnen, wo diese absolute Kinder stehen.

body { 
 
    background-color: black; 
 
} 
 

 
#page_Wrap { 
 
    /* Flexbox setup */ 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    xflex-flow: column nowrap; 
 
    -webkit-flex-flow: column; 
 
    -moz-flex-flow: column; 
 
    -ms-flex-flow: column; 
 
    flex-flow: column; 
 
    /* Basic styling */ 
 
    width: 94%; 
 
    margin: 0 auto; 
 
    max-width: 1280px; 
 
    border: 1px solid red; 
 
} 
 

 
header { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-box-flex: 0; 
 
    -moz-box-flex: 0; 
 
    -ms-flex: 0; 
 
    -webkit-flex: 0; 
 
    flex: 0; 
 
    min-height: 100px; 
 
} 
 

 
#head_Logo, 
 
#head_Note { 
 
    -webkit-box-flex: 0; 
 
    -ms-flex: 0 0 77px; 
 
    flex: 0 0 77px; 
 
    width: 77px; 
 
    height: 90px; 
 
    border: 1px solid yellow; 
 
} 
 

 
#head_Area { 
 
    -webkit-box-flex: 2; 
 
    -ms-flex: 2; 
 
    flex: 2; 
 
    -webkit-flex-flow: column nowrap; 
 
    -moz-flex-flow: column nowrap; 
 
    -ms-flex-flow: column nowrap; 
 
    flex-flow: column nowrap; 
 
    min-width: 0; 
 
    position:relative;/*update*/ 
 
} 
 

 
.wrap_News { 
 
    height: 45px; 
 
    border: 1px solid lime; 
 
} 
 

 
.news_Area { 
 
    color: #0FF; 
 
    opacity: 0; 
 
    -moz-opacity: 0; 
 
    filter: alpha(opacity=0); 
 
} 
 

 
.news_Text { 
 
    position:absolute; 
 
    padding: 0 5px; 
 
    font: bold 18px Arial, Helvetica, sans-serif; 
 
    height: 45px; 
 
    overflow: hidden; 
 
    line-height: 45px; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    max-width:100%;/*update*/ 
 
} 
 

 
.wrap_News:hover .news_Area { 
 
    -webkit-animation-play-state: paused; 
 
    -moz-animation-play-state: paused; 
 
    -o-animation-play-state: paused; 
 
    animation-play-state: paused; 
 
} 
 

 
.news_Area:nth-child(1) { 
 
    -webkit-animation: cycle 15s 0s infinite linear; 
 
    -moz-animation: cycle 15s 0s infinite linear; 
 
    -o-animation: cycle 15s 0s infinite linear; 
 
    animation: cycle 15s 0s infinite linear; 
 
} 
 

 
.news_Area:nth-child(2) { 
 
    -webkit-animation: cycle 15s 5s infinite linear; 
 
    -moz-animation: cycle 15s 5s infinite linear; 
 
    -o-animation: cycle 15s 5s infinite linear; 
 
    animation: cycle 15s 5s infinite linear; 
 
} 
 

 
.news_Area:nth-child(3) { 
 
    -webkit-animation: cycle 15s 10s infinite linear; 
 
    -moz-animation: cycle 15s 10s infinite linear; 
 
    -o-animation: cycle 15s 10s infinite linear; 
 
    animation: cycle 15s 10s infinite linear; 
 
} 
 

 
@keyframes cycle { 
 
    0% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    31% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-moz-keyframes cycle { 
 
    0% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    31% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-webkit-keyframes cycle { 
 
    0% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    31% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-ms-keyframes cycle { 
 
    0% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    31% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-o-keyframes cycle { 
 
    0% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    31% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
}

<div id="page_Wrap"> 
 

 
    <header> 
 
    <div id="head_Logo"> 
 
    </div> 
 
    <!-- end of #head_Logo --> 
 

 
    <div id="head_Area"> 
 

 
     <div class="wrap_News"> 
 
     <div class="news_Area"> 
 
      <div class="news_Text">This is top secret.&nbsp;&nbsp;<a href="#">Read more</a></div> 
 
     </div> 
 
     <!-- end of #news_Area --> 
 
     <div class="news_Area"> 
 
      <div class="news_Text"> 
 
      This is to see what happens if a lot of text is placed here and is just blah blah blah blah blah blah. 
 
      </div> 
 
      <!-- end of #wrap_News --> 
 
     </div> 
 
     <!-- end of #news_Area --> 
 
     <div class="news_Area"> 
 
      <div class="news_Text">Part 3 here</div> 
 
     </div> 
 
     <!-- end of #news_Area --> 
 
     </div> 
 
     <!-- end of #wrap_News --> 
 

 

 

 
    </div> 
 
    <!-- end of #head_Area --> 
 
    <div id="head_Note"> 
 
     <!-- HERE --> 
 
    </div> 
 
    <!-- end of #head_Note --> 
 
    </header> 
 
    <!-- end of #header --> 
 

 

 
</div> 
 
<!-- end of #page_Wrap -->

Quelle

2017-11-13 19:16:34

Interessant ... das funktioniert auch UND ohne Skripte. Vielen Dank !!! – user3344341

Sie benötigen den Begrenzungsrahmen mit einer Größe zu geben, sonst wird es nur erweitern (und damit haben nie einen Überlauf), siehe die Änderung zu .news_Text {} (zugegeben ein illustrative gestrichelte orange Grenze).

body { 
 
    background-color: black; 
 
} 
 

 
#page_Wrap { 
 
    /* Flexbox setup */ 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    xflex-flow: column nowrap; 
 
    -webkit-flex-flow: column; 
 
    -moz-flex-flow: column; 
 
    -ms-flex-flow: column; 
 
    flex-flow: column; 
 
    /* Basic styling */ 
 
    width: 94%; 
 
    margin: 0 auto; 
 
    max-width: 1280px; 
 
    border: 1px solid red; 
 
} 
 

 
header { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-box-flex: 0; 
 
    -moz-box-flex: 0; 
 
    -ms-flex: 0; 
 
    -webkit-flex: 0; 
 
    flex: 0; 
 
    min-height: 100px; 
 
} 
 

 
#head_Logo, 
 
#head_Note { 
 
    -webkit-box-flex: 0; 
 
    -ms-flex: 0 0 77px; 
 
    flex: 0 0 77px; 
 
    width: 77px; 
 
    height: 90px; 
 
    border: 1px solid yellow; 
 
} 
 

 
#head_Area { 
 
    -webkit-box-flex: 2; 
 
    -ms-flex: 2; 
 
    flex: 2; 
 
    -webkit-flex-flow: column nowrap; 
 
    -moz-flex-flow: column nowrap; 
 
    -ms-flex-flow: column nowrap; 
 
    flex-flow: column nowrap; 
 
    min-width: 0; 
 
} 
 

 
.wrap_News { 
 
    height: 45px; 
 
    border: 1px solid lime; 
 
} 
 

 
.news_Area { 
 
    color: #0FF; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    xmargin-right: 115px; 
 
    xright: 0; 
 
    xleft: 116px; 
 
    opacity: 0; 
 
    -moz-opacity: 0; 
 
    filter: alpha(opacity=0); 
 
} 
 

 
.news_Text { 
 
    padding: 0 5px; 
 
    font: bold 18px Arial, Helvetica, sans-serif; 
 
    height: 45px; 
 
    overflow: hidden; 
 
    line-height: 45px; 
 
    white-space: nowrap; 
 
    
 
    border: 1px dashed orange; 
 
    text-overflow: ellipsis; 
 
    width: 345px; 
 
} 
 

 
.wrap_News:hover .news_Area { 
 
    -webkit-animation-play-state: paused; 
 
    -moz-animation-play-state: paused; 
 
    -o-animation-play-state: paused; 
 
    animation-play-state: paused; 
 
} 
 

 
.news_Area:nth-child(1) { 
 
    -webkit-animation: cycle 15s 0s infinite linear; 
 
    -moz-animation: cycle 15s 0s infinite linear; 
 
    -o-animation: cycle 15s 0s infinite linear; 
 
    animation: cycle 15s 0s infinite linear; 
 
} 
 

 
.news_Area:nth-child(2) { 
 
    -webkit-animation: cycle 15s 5s infinite linear; 
 
    -moz-animation: cycle 15s 5s infinite linear; 
 
    -o-animation: cycle 15s 5s infinite linear; 
 
    animation: cycle 15s 5s infinite linear; 
 
} 
 

 
.news_Area:nth-child(3) { 
 
    -webkit-animation: cycle 15s 10s infinite linear; 
 
    -moz-animation: cycle 15s 10s infinite linear; 
 
    -o-animation: cycle 15s 10s infinite linear; 
 
    animation: cycle 15s 10s infinite linear; 
 
} 
 

 
@keyframes cycle { 
 
    0% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    31% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-moz-keyframes cycle { 
 
    0% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    31% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-webkit-keyframes cycle { 
 
    0% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    31% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-ms-keyframes cycle { 
 
    0% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    31% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@-o-keyframes cycle { 
 
    0% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    2% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    31% { 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    } 
 
}

<div id="page_Wrap"> 
 

 
    <header> 
 
    <div id="head_Logo"> 
 
    </div> 
 
    <!-- end of #head_Logo --> 
 

 
    <div id="head_Area"> 
 

 
     <div class="wrap_News"> 
 
     <div class="news_Area"> 
 
      <div class="news_Text">This is top secret.&nbsp;&nbsp;<a href="#">Read more</a></div> 
 
     </div> 
 
     <!-- end of #news_Area --> 
 
     <div class="news_Area"> 
 
      <div class="news_Text"> 
 
      This is to see what happens if a lot of text is placed here and is just blah blah blah blah blah blah. 
 
      </div> 
 
      <!-- end of #wrap_News --> 
 
     </div> 
 
     <!-- end of #news_Area --> 
 
     <div class="news_Area"> 
 
      <div class="news_Text">Part 3 here</div> 
 
     </div> 
 
     <!-- end of #news_Area --> 
 
     </div> 
 
     <!-- end of #wrap_News --> 
 

 

 

 
    </div> 
 
    <!-- end of #head_Area --> 
 
    <div id="head_Note"> 
 
     <!-- HERE --> 
 
    </div> 
 
    <!-- end of #head_Note --> 
 
    </header> 
 
    <!-- end of #header --> 
 

 

 
</div> 
 
<!-- end of #page_Wrap -->

Quelle

2017-11-13 18:47:44 msanford

Vielen Dank für Ihre Antwort, aber das ist ein fester mit. Ich versuche es flüssig zu machen. Ich habe versucht, die Klasse auf 100% zu setzen, aber das funktioniert nicht. Ich denke, ich könnte Medienabfragen verwenden. – user3344341

@ user3344341 Sie müssen eine Breite einstellen, sonst ist es einfach nicht möglich. – msanford

-1

diese CSS könnte helfen

.wrap_News { 
    height: 90px; 
    border: 1px solid lime; 
} 
.news_Text { 
    padding: 0 5px; 
    font: bold 18px Arial, Helvetica, sans-serif; 
    overflow: hidden; 
    line-height: 100px; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    min-height: 100px; 
}

Quelle

2017-11-13 19:02:22

Sie nur die Ellipse Überlauf verwenden können, wenn bestimmte Bedingungen erfüllt sind. Der Hauptpunkt, mit dem Sie Probleme haben, ist, dass Ihre Breite nicht festgelegt ist.

See Spudley Antwort- here für mehr Details

Basierend auf Ihre codepen Sie könnte folgende JS hinzufügen (I verwendet jQuery in diesem Beispiel) dem Elemente eine CSS feste Breite zu geben, die nach wie vor dynamisch auf Ihre Seitengröße ist.

$(document).ready(function() { 
    // resize the div based on your parent element that is the right size 
    function resizeHandler() { 
     var width = $(".wrap_News")[0].offsetWidth; 
     $(".news_Text").css("width", "" + width + "px"); 
    } 

    // register for changing the width when window size changes 
    $(window).resize(resizeHandler); 

    // call once on page load 
    resizeHandler(); 
});

Gabel Ihres copepen zeigt diese here.

Quelle

2017-11-13 19:04:26 crapier

Es ist reaktionsschnell, genau das, was ich brauchte, und ich kann das Skript auf den Boden legen, um "über dem Falz" zu vermeiden. Vielen Dank !!!!!!!!!! – user3344341

Text-Überlauf Ellipse funktioniert nicht richtig

Antwort

Verwandte Themen