当浏览器窗口大小基于纯CSS更改时,在范围中显示点

尝试如下操作:

span::after {
       content: "Lorem Ipsum is simply dummy text of the printing and 
       typesetting industry blah blah blah...";
       }

@media screen and (max-width:600px){
      span::after {
      content: "Lorem Ipsum is simply dummy text";
      }
    }

确保你设定了你的临界点!

https://codepen.io/robbiemcmullen/pen/ajddGK

我已经创建了自己的实现 https://codepen.io/mpiwowarski/pen/qybrqY : 示例HTML代码:

<table>
  <tr>
    <td>
  <div class="ellipsis">
  <span>
  Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.  
   </span>
  <div>
    </td>
    <td style="width:70%">
    </td>
  </tr>
  </table>

CSS:

.ellipsis {
    overflow: hidden;
    height: 50px;
    line-height: 25px;
     }
.ellipsis:before {
    content: "";
    float: left;
    width: 5px; 
  height: 50px; 
     }
.ellipsis > *:first-child {
    float: right;
    width: 100%; 
    margin-left: -5px;
    background: #AFF; }
.ellipsis:after {
    content: "...";
    float: right;
  position: relative;
    top: -25px;
  left: 100%;
    width: 100px; 
  margin-left: -100px;
    padding-right: 5px;
    background: white; 
   }