CODEWITHSUNDEEP
css
user3344341
user3344341

Reputation: 105

text-overflow ellipsis is not working properly

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 -->

Upvotes: 0

Views: 258

Answers (4)

Nilesh Patel
Nilesh Patel

Reputation: 11

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;
}

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105843

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 -->

Upvotes: 0

crapier
crapier

Reputation: 373

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.

Upvotes: 1

msanford
msanford

Reputation: 12229

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 -->

Upvotes: 2

Related Questions