Question

在使用Chrome浏览器的情况下，以下CSS可以工作并显示省略号（红色突出显示），结果如下：

Chrome浏览器：

server {
    listen 80;
    listen [::]:80;
    server_name domaine.com www.domaine.com; 
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name domaine.com www.domaine.com;
    root /var/www/domaine.com;
    index index.php index.html index.html;

    # SSL Cerbot

    ssl_certificate /etc/letsencrypt/live/domaine.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/domaine.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

          add_header X-Frame-Options SAMEORIGIN;
          add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
          add_header X-Content-Type-Options nosniff;
          add_header X-XSS-Protection "1; mode=block";


    location ~* \.(class|css|csv|doc|docx|ejs|eot|eps|jar|js|mid|midi|otf|pdf|pls|ppt|pptx|ps|svgz|tiff|ttf|txt|webp|woff|woff2|xls|xlsx)$ {
        try_files $uri =404;
    }

    location ~*  \.(jpg|jpeg|png|gif|ico|css|js|pdf|txt|bmp|webp|svg|ttf|otf|eot|woff)$ {
        expires 30d;
    }

   location / {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $http_host;
        proxy_set_header X-Forwarded-Proto $scheme;
        ### use localhost:8080 and firewall for public network to port 8080 to disable access from internet;
        proxy_pass http://127.0.0.1:8080;
    }
}

结果：

但是对于IE 11，它不会显示省略号：

有人可以帮助我解决此问题吗？

Answer 1

经过测试，似乎可以正常工作：https://jsbin.com/zaxasamoxa/1/edit

h1 {
  width: 100px;
  position: relative;
  display: block;
  display: -webkit-box;
  max-height: 136px;
  -webkit-line-clamp: 4px;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<h1>absdfmksdlfmdlskflsdkfmlsdkmflskdmf</h1>

检查您的CSS是否有其他可能使我弄乱的规则。

请注意，display: -webkit-box;将打破镶边中的省略号。

https://caniuse.com/#feat=text-overflow确认支持

文本溢出：省略号属性不适用于IE11浏览器

1 个答案: