Question

我制作了一个简单的网站来证明这种行为：

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

的结果

使用"Helvetica Neue"

是吗？如何使其适用于Open Sans？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

文本溢出使用不同字体的奇怪行为

1 个答案: