文本溢出省略号无法正常工作

Question

我最近将我的新闻自动收录器更改为CSS版本。我的问题是我试图使用“文本溢出：省略号”，它只是不起作用。我试过把风格放在各处都没有成功。谁能帮我？我创建了一个基本的codepen。绿色课程是我的问题。

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

Answer 1

你需要给边界框一个大小，否则它只会扩展（因此永远不会有溢出），看到对.news_Text {}的更改（添加了一个说明性的虚线橙色边框）。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用此css可能会有所帮助

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

Answer 3

如果某些条件为真，则只能使用椭圆溢出。您遇到问题的主要原因是宽度不固定。

有关详细信息，请参阅Spudley的答案here

基于您的codepen，您可以添加以下JS（我在此示例中使用了jQuery）为元素提供了一个css固定宽度，该宽度仍然是您页面大小的动态。

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

您的codepen的叉子显示此here。

Answer 4

您需要设置width或max-width以提高效率text-overflow ，并设置position:relative; 所以它是参考来计算那些absolute个孩子的空间。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;