0

I recently changed my news ticker to a CSS version. My problem is the I am trying to use the "text-overflow: ellipsis" and it just is not working. I have tried placing the styles everywhere without success. Can anyone help me? I have created a basic codepen. The class in GREEN is my problem.

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 -->
msanford
  • 11,803
  • 11
  • 66
  • 93
user3344341
  • 105
  • 8

4 Answers4

2

You need to give the bounding box a size, otherwise it will just expand (and thus never have an overflow), see the change to .news_Text {} (added an illustrative dashed orange border).

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 -->
msanford
  • 11,803
  • 11
  • 66
  • 93
  • Thank you for your response but this is a fixed with. I am trying to have it fluid ( responsive ). I tried to put the class at 100% but that doesnt work. I guess I could use media queries. – user3344341 Nov 13 '17 at 18:56
  • @user3344341 You need to set a width, otherwise it's just not possible. – msanford Nov 13 '17 at 19:10
1

Using this css might help

.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;
}
Priya
  • 1,522
  • 1
  • 14
  • 31
Nilesh Patel
  • 11
  • 2
1

You can only use the ellipse overflow if certain conditions are true. The main one your having issues with is that your width is not fixed.

See Spudley's Answer here for more details

Based off your codepen your could add the following JS (I used jQuery in this example) to give the element a css fixed width that is still dynamic to your page size.

$( 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();
});

Fork of your codepen showing this here.

crapier
  • 373
  • 1
  • 6
  • It is responsive, just what I needed, plus I can put the script at the bottom to avoid "above the fold". Thank you !!!!!!!!!! – user3344341 Nov 13 '17 at 19:11
0

You need to set a width or a max-width to have an efficient text-overflow and also set the direct parent in position:relative; so it is the reference to calculate the space where stand those absolute children.

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 -->
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129