我制作了一个简单的网站来演示此行为:

 <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
      <link href="./site.css" rel="stylesheet">
      <title>Document</title>
 </head>
<body>
   <ul class="list-group">
    <li class="list-group-item">
        <a><span class="glyphicon glyphicon-remove"></span></a>
        <span class="label label-primary"> LABEL </span>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa //overflowed text
    </li>
</ul>
</body>


和CSS:

.list-group-item {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: "Open Sans", sans-serif;  // if i comment this line it works
}

a {
  float:right;
}

.label {
   float:right;
   margin-right: 6px;
}


"Open Sans"结果

css - 不同字体的文本溢出异常行为-LMLPHP

使用"Helvetica Neue"

css - 不同字体的文本溢出异常行为-LMLPHP

那正确吗?如何使其与Open Sans一起使用?

最佳答案

无法重现该问题-如果没有足够的空间,所有项目都以省略号结尾。您正在使用什么操作系统和浏览器?



.list-group-item {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 300px;
}
.helvetica {
  font-family: "Helvetica Neue", sans-serif;
}
.open-sans {
  font-family: "Open Sans", sans-serif;
}
a {
  float:right;
}

.label {
   float:right;
   margin-right: 6px;
}

 <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
      <link href="./site.css" rel="stylesheet">
      <title>Document</title>
 </head>
<body>
   <ul class="list-group">
    <li class="list-group-item">
        <a><span class="glyphicon glyphicon-remove"></span></a>
        <span class="label label-primary"> LABEL </span>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa //overflowed text
    </li>
     <li class="list-group-item open-sans">
        <a><span class="glyphicon glyphicon-remove"></span></a>
        <span class="label label-primary"> LABEL </span>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa //overflowed text
    </li>
     <li class="list-group-item helvetica">
        <a><span class="glyphicon glyphicon-remove"></span></a>
        <span class="label label-primary"> LABEL </span>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa //overflowed text
    </li>
</ul>
</body>

10-05 20:53
查看更多