搜索
搜索

CSS文本溢出：在Angular 8中使用CSS网格时省略号不起作用

debugcn 发表于 Dev
23
永恒神龙

我无法在Angular 8的CSS网格中使用省略号。

我尝试了以下方法：

父网格容器：

overflow: hidden;

子网格项：

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

代码示例：https : //jsfiddle.net/eternalshenron/xvm82jpd/20/

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overflow {
  overflow: hidden;
}

@media only screen and (max-width: 480px) {

  nb-card-header {
    border-bottom: none;
    text-align: right;
    padding: 0 1.25rem;
    padding-top: 1rem;
  }
  
  .h1-card {
    font-family: Open Sans, sans-serif;
    font-weight: 550;
    font-size: 80%;
    color: #373737;
  }
  
  .h2-card {
  font-family: Open Sans, sans-serif;
  font-size: 75%;
  font-weight: 550;
  color: #373737;
  }
  
  .h3-card {
  font-family: Open Sans, sans-serif;
  font-size: 70%;
  color: #545454;
  }
  
  .h4-card {
  font-family: Open Sans, sans-serif;
  font-size: 70%;
  color: #373737;
  }
  
  .card-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "location misc-details";
    margin: 0%;
    padding: 0%;
  }
  
  .location {
    grid-area: location;
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-areas: "seperator from-to";
  }
  
  .from-to {
    grid-area: from-to;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:  "location-1" 
                          "location-2"
  }
  
  .location-1 {
    padding-left: 10px;
    padding-right: 15px;
    grid-area: location-1;
    align-self: top;
    justify-self: left;
    text-align: left;
  }
  
  .location-2 {
    padding-left: 10px;
    padding-right: 15px;
    grid-area: location-2;
    align-self: flex-end;
    justify-self: left;
    text-align: left;
    min-width: 0;
    max-width: 100%;
  }
  
  .loc {
    margin-bottom: 0px;
  }
  
  .seperator {
    grid-area: seperator;
    align-items: center;
    display: grid;
    grid-template-rows: min-content 1fr min-content;
    grid-template-areas:  "dot-start" 
                          "line" 
                          "dot-end";
  }
  
  .line {
    width: 1px;
    background-color: #ccc;
    height: 100%;
    border: 0px solid black;
    justify-self: center;
  }
      
  .dot-start {
    grid-area: dot-start;
    justify-self: center;
    align-self: center;
  }
    
  .dot-end {
    grid-area: dot-end;
    justify-self: center;
    align-self: center;
    margin-bottom: 2.65em;
  }
  
  .misc-details {
    grid-area: misc-details;
    display: grid;
    justify-self: right;
    grid-template-rows: 1fr max-content 1fr;    
    grid-template-areas: "vehicle-type"
                          "seperator-2"
                          "other-details";
  }
  
  .vehicle-load {
    grid-area: vehicle-type;
    display: grid;
    width: 100%;
    grid-template-columns: max-content;
    grid-template-areas:   "vehicle"
                          "load-size";
  }
  
  .vehicle {
    grid-area: vehicle;
    display: grid;
    justify-self: center;
    grid-template-columns: max-content min-content;
    grid-template-areas: "vehicle-icon vehicle-type";
    padding-bottom: 0.5em;
  }
  
  .vehicle-icon {
    grid-area: vehicle-icon;
    padding-right: 1em;
  }
  
  .vehicle-type {
    grid-area: vehicle-type;
    text-align: center;
    align-self: center;
  }
  
  .load-size {
    grid-area: load-size;
    justify-self: center;
    text-align: center;
    padding-top: 0.5em;
  }
  
  img {
      max-width: 4em;
  }
  
  .other-details {
    grid-area: other-details;
    display: grid;
    grid-template-rows: 1fr min-content 1fr;
    width: 100%;
    justify-items: center;
    align-items: center;
  }
  
  .gray-line {
    width: 100%;
    background-color: #ccc;
    height: 1px;
    border: 0px solid #545454;
  }
  
}

@media only screen and (max-width: 1023px) {
  nb-card-header {
    border-bottom: none;
    text-align: right;
    padding: 0 1.25rem;
    padding-top: 1rem;
  }

  .h1-card {
    font-family: Open Sans, sans-serif;
    font-weight: 550;
    font-size: 115%;
    color: #373737;
  }

  .h2-card {
  font-family: Open Sans, sans-serif;
  font-size: 105%;
  font-weight: 550;
  color: #373737;
  }

  .h3-card {
  font-family: Open Sans, sans-serif;
  font-size: 90%;
  color: #545454;
  }

  .h4-card {
  font-family: Open Sans, sans-serif;
  font-size: 90%;
  color: #373737;
  }

  .card-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "location misc-details";
    margin: 0%;
    padding: 0%;
  }

  .location {
    grid-area: location;
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-areas: "seperator from-to";
  }

  .from-to {
    grid-area: from-to;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:  "location-1" 
                          "location-2";
  }

  .location-1 {
    padding-left: 10px;
    padding-right: 15px;
    grid-area: location-1;
    align-self: top;
    justify-self: left;
    text-align: left;
  }

  .location-2 {
    padding-left: 10px;
    padding-right: 15px;
    grid-area: location-2;
    align-self: flex-end;
    justify-self: left;
    text-align: left;
  }

  .loc {
    margin-bottom: 0px;
  }

  .seperator {
    grid-area: seperator;
    align-items: center;
    display: grid;
    grid-template-rows: min-content 1fr min-content;
    grid-template-areas:  "dot-start" 
                          "line" 
                          "dot-end";
  }

  .line {
    width: 1px;
    background-color: #ccc;
    height: 100%;
    border: 0px solid black;
    justify-self: center;
  }
      
  .dot-start {
    grid-area: dot-start;
    justify-self: center;
    align-self: center;
  }
    
  .dot-end {
    grid-area: dot-end;
    justify-self: center;
    align-self: center;
    margin-bottom: 2.65em;
  }

  .misc-details {
    grid-area: misc-details;
    display: grid;
    justify-self: right;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr max-content 1fr;    
    grid-template-areas: "vehicle-type"
                          "seperator-2"
                          "other-details";
  }

  .vehicle-load {
    grid-area: vehicle-type;
    display: grid;
    width: 100%;
    grid-template-columns: max-content;
    grid-template-areas:   "vehicle"
                          "load-size";
  }

  .vehicle {
    grid-area: vehicle;
    display: grid;
    justify-self: center;
    grid-template-columns: max-content min-content;
    grid-template-areas: "vehicle-icon vehicle-type";
    padding-bottom: 0.5em;
  }

  .vehicle-icon {
    grid-area: vehicle-icon;
    padding-right: 1em;
  }

  .vehicle-type {
    grid-area: vehicle-type;
    text-align: center;
    align-self: center;
  }

  .load-size {
    grid-area: load-size;
    justify-self: center;
    text-align: center;
    padding-top: 0.5em;
  }

  img {
      max-width: 8em;
  }

  .other-details {
    grid-area: other-details;
    display: grid;
    grid-template-rows: 1fr min-content 1fr;
    width: 100%;
    justify-items: center;
    align-items: center;
  }

  .gray-line {
    width: 100%;
    background-color: #ccc;
    height: 1px;
    border: 0px solid #545454;
  }
}

@media only screen and (min-width: 1024px) {
  nb-card-header {
    border-bottom: none;
    text-align: right;
    padding: 0 1.25rem;
    padding-top: 1rem;
  }

  .h1-card {
    font-family: Open Sans, sans-serif;
    font-weight: 550;
    font-size: 115%;
    color: #373737;
  }

  .h2-card {
  font-family: Open Sans, sans-serif;
  font-size: 105%;
  font-weight: 550;
  color: #373737;
  }

  .h3-card {
  font-family: Open Sans, sans-serif;
  font-size: 90%;
  color: #545454;
  }

  .h4-card {
  font-family: Open Sans, sans-serif;
  font-size: 90%;
  color: #373737;
  }

  .card-container {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-areas: "location location location location vehicle-type vehicle-type vehicle-type vehicle-type other-details other-details";
  }

  .location {
    grid-area: location;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    grid-template-areas: "location-1 seperator location-2";
  }

  .location-1 {
    padding-left: 10px;
    padding-right: 15px;
    grid-area: location-1;
    align-self: center;
    justify-self: left;
    text-align: left;
  }

  .location-2 {
    padding-left: 15px;
    padding-right: 10px;
    grid-area: location-2;
    align-self: center;
    justify-self: right;
    text-align: right;
  }

  .loc {
    margin-bottom: 0px;
  }

  .seperator {
    grid-area: seperator;
    align-items: center;
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    grid-template-areas: "dot-start line dot-end";
  }

  hr.line {
    width: 100%;
    background-color: #ccc;
    height: 1px;
    border: 0px solid black;
  }
      
  .dot-start {
    grid-area: dot-start;  
    justify-self: center;
  }
    
  .dot-end {
    grid-area: dot-end;
    grid-row: 1/2;
    justify-self: center;
  }

  .vehicle-load {
    grid-area: vehicle-type;
    display: grid;
    align-items: center;
    justify-self: center;
    justify-items: center;
    grid-template-columns: max-content;
    grid-template-areas:   "vehicle"
                          "load-size";
  }

  .vehicle {
    grid-area: vehicle;
    display: grid;
    grid-template-columns: max-content min-content;
    grid-template-areas: "vehicle-icon vehicle-type";
    padding-bottom: 0.5em;
  }

  .vehicle-icon {
    grid-area: vehicle-icon;
    padding-right: 1em;
  }

  .vehicle-type {
    grid-area: vehicle-type;
    padding-left: 1em;
    text-align: center;
    align-self: center;
  }

  .load-size {
    grid-area: load-size;
    text-align: center;
    padding-top: 0.5em;
  }

  img {
      max-width: 8em;
  }

  .other-details {
    grid-area: other-details;
    display: grid;
    grid-template-rows: 1fr min-content 1fr;
    justify-items: center;
    align-items: center;
  }

  .gray-line {
    width: 60%;
    background-color: #ccc;
    height: 1px;
    border: 0px solid #545454;
  }

}
<div class="card-container">
  <div class="location">
    <div class="from-to overflow">
      <div class="location-1 ellipsis">
        <div class="loc ellipsis">
          <span class="h1-card">Thiruvananthapuram City</span><br>
          <span class="h3-card">Thiruvananthapuram
            <br>Kerala</span>
        </div>
      </div>
      <div class="location-2">
        <p class="loc ellipsis">
          <span class="h1-card">Venkatanarasimharajuvaripeta</span><br>
          <span class="h3-card">Chitoor
            <br>Andhra Pradesh</span>
        </p>
      </div>
    </div>
    <div class="seperator">
      <svg height="1.2em" width="1.2em" class="dot-start">
        <circle cx="0.6em" cy="0.74em" r="0.4em" stroke="black" stroke-width="0.06em" fill="lightgreen" />
      </svg>
      <div class="line"></div>
      <svg height="1.2em" width="1.2em" class="dot-end">
        <circle cx="0.6em" cy="0.5em" r="0.4em" stroke="red" stroke-width="0.12em" fill="white" />
      </svg>
    </div>
  </div>
  <div class="misc-details">
    <div class="vehicle-load">
      <div class="vehicle">
        <div class="vehicle-icon"> ICON ICON ICON </div>
        <div class="vehicle-type"><span class="h2-card">Trailer</span><br>
          <span class="h4-card">Load</span></div>
      </div>              
      <div class="h2-card load-size">40' x 10' x 8' | 20 Tons</div>
    </div>
    <hr class="gray-line" />
    <div class="other-details">
      <div class="load-type h2-card">ODC Cargo</div>
      <hr class="gray-line" />
      <div class="loading-date h2-card">Tue | 22 Sep</div>
    </div>
  </div>
</div>

陪同Afif

添加max-width:100%以避免溢出并min-width:0允许项目收缩：

.ellipsis {
    ...
    min-width: 0;
    max-width: 100%;
  }

确保将类添加到location-1和location-2

完整代码

* {
  box-sizing: border-box;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}

.overflow {
  overflow: hidden;
}

@media only screen and (max-width: 480px) {
  nb-card-header {
    border-bottom: none;
    text-align: right;
    padding: 0 1.25rem;
    padding-top: 1rem;
  }
  .h1-card {
    font-family: Open Sans, sans-serif;
    font-weight: 550;
    font-size: 80%;
    color: #373737;
  }
  .h2-card {
    font-family: Open Sans, sans-serif;
    font-size: 75%;
    font-weight: 550;
    color: #373737;
  }
  .h3-card {
    font-family: Open Sans, sans-serif;
    font-size: 70%;
    color: #545454;
  }
  .h4-card {
    font-family: Open Sans, sans-serif;
    font-size: 70%;
    color: #373737;
  }
  .card-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "location misc-details";
    margin: 0%;
    padding: 0%;
  }
  .location {
    grid-area: location;
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-areas: "seperator from-to";
  }
  .from-to {
    grid-area: from-to;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "location-1" "location-2"
  }
  .location-1 {
    padding-left: 10px;
    padding-right: 15px;
    grid-area: location-1;
    align-self: top;
    justify-self: left;
    text-align: left;
  }
  .location-2 {
    padding-left: 10px;
    padding-right: 15px;
    grid-area: location-2;
    align-self: flex-end;
    justify-self: left;
    text-align: left;
  }
  .loc {
    margin-bottom: 0px;
  }
  .seperator {
    grid-area: seperator;
    align-items: center;
    display: grid;
    grid-template-rows: min-content 1fr min-content;
    grid-template-areas: "dot-start" "line" "dot-end";
  }
  .line {
    width: 1px;
    background-color: #ccc;
    height: 100%;
    border: 0px solid black;
    justify-self: center;
  }
  .dot-start {
    grid-area: dot-start;
    justify-self: center;
    align-self: center;
  }
  .dot-end {
    grid-area: dot-end;
    justify-self: center;
    align-self: center;
    margin-bottom: 2.65em;
  }
  .misc-details {
    grid-area: misc-details;
    display: grid;
    justify-self: right;
    grid-template-rows: 1fr max-content 1fr;
    grid-template-areas: "vehicle-type" "seperator-2" "other-details";
  }
  .vehicle-load {
    grid-area: vehicle-type;
    display: grid;
    width: 100%;
    grid-template-columns: max-content;
    grid-template-areas: "vehicle" "load-size";
  }
  .vehicle {
    grid-area: vehicle;
    display: grid;
    justify-self: center;
    grid-template-columns: max-content min-content;
    grid-template-areas: "vehicle-icon vehicle-type";
    padding-bottom: 0.5em;
  }
  .vehicle-icon {
    grid-area: vehicle-icon;
    padding-right: 1em;
  }
  .vehicle-type {
    grid-area: vehicle-type;
    text-align: center;
    align-self: center;
  }
  .load-size {
    grid-area: load-size;
    justify-self: center;
    text-align: center;
    padding-top: 0.5em;
  }
  img {
    max-width: 4em;
  }
  .other-details {
    grid-area: other-details;
    display: grid;
    grid-template-rows: 1fr min-content 1fr;
    width: 100%;
    justify-items: center;
    align-items: center;
  }
  .gray-line {
    width: 100%;
    background-color: #ccc;
    height: 1px;
    border: 0px solid #545454;
  }
}

@media only screen and (max-width: 1023px) {
  nb-card-header {
    border-bottom: none;
    text-align: right;
    padding: 0 1.25rem;
    padding-top: 1rem;
  }
  .h1-card {
    font-family: Open Sans, sans-serif;
    font-weight: 550;
    font-size: 115%;
    color: #373737;
  }
  .h2-card {
    font-family: Open Sans, sans-serif;
    font-size: 105%;
    font-weight: 550;
    color: #373737;
  }
  .h3-card {
    font-family: Open Sans, sans-serif;
    font-size: 90%;
    color: #545454;
  }
  .h4-card {
    font-family: Open Sans, sans-serif;
    font-size: 90%;
    color: #373737;
  }
  .card-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "location misc-details";
    margin: 0%;
    padding: 0%;
  }
  .location {
    grid-area: location;
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-areas: "seperator from-to";
  }
  .from-to {
    grid-area: from-to;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "location-1" "location-2";
  }
  .location-1 {
    padding-left: 10px;
    padding-right: 15px;
    grid-area: location-1;
    align-self: top;
    justify-self: left;
    text-align: left;
  }
  .location-2 {
    padding-left: 10px;
    padding-right: 15px;
    grid-area: location-2;
    align-self: flex-end;
    justify-self: left;
    text-align: left;
  }
  .loc {
    margin-bottom: 0px;
  }
  .seperator {
    grid-area: seperator;
    align-items: center;
    display: grid;
    grid-template-rows: min-content 1fr min-content;
    grid-template-areas: "dot-start" "line" "dot-end";
  }
  .line {
    width: 1px;
    background-color: #ccc;
    height: 100%;
    border: 0px solid black;
    justify-self: center;
  }
  .dot-start {
    grid-area: dot-start;
    justify-self: center;
    align-self: center;
  }
  .dot-end {
    grid-area: dot-end;
    justify-self: center;
    align-self: center;
    margin-bottom: 2.65em;
  }
  .misc-details {
    grid-area: misc-details;
    display: grid;
    justify-self: right;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr max-content 1fr;
    grid-template-areas: "vehicle-type" "seperator-2" "other-details";
  }
  .vehicle-load {
    grid-area: vehicle-type;
    display: grid;
    width: 100%;
    grid-template-columns: max-content;
    grid-template-areas: "vehicle" "load-size";
  }
  .vehicle {
    grid-area: vehicle;
    display: grid;
    justify-self: center;
    grid-template-columns: max-content min-content;
    grid-template-areas: "vehicle-icon vehicle-type";
    padding-bottom: 0.5em;
  }
  .vehicle-icon {
    grid-area: vehicle-icon;
    padding-right: 1em;
  }
  .vehicle-type {
    grid-area: vehicle-type;
    text-align: center;
    align-self: center;
  }
  .load-size {
    grid-area: load-size;
    justify-self: center;
    text-align: center;
    padding-top: 0.5em;
  }
  img {
    max-width: 8em;
  }
  .other-details {
    grid-area: other-details;
    display: grid;
    grid-template-rows: 1fr min-content 1fr;
    width: 100%;
    justify-items: center;
    align-items: center;
  }
  .gray-line {
    width: 100%;
    background-color: #ccc;
    height: 1px;
    border: 0px solid #545454;
  }
}

@media only screen and (min-width: 1024px) {
  nb-card-header {
    border-bottom: none;
    text-align: right;
    padding: 0 1.25rem;
    padding-top: 1rem;
  }
  .h1-card {
    font-family: Open Sans, sans-serif;
    font-weight: 550;
    font-size: 115%;
    color: #373737;
  }
  .h2-card {
    font-family: Open Sans, sans-serif;
    font-size: 105%;
    font-weight: 550;
    color: #373737;
  }
  .h3-card {
    font-family: Open Sans, sans-serif;
    font-size: 90%;
    color: #545454;
  }
  .h4-card {
    font-family: Open Sans, sans-serif;
    font-size: 90%;
    color: #373737;
  }
  .card-container {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-areas: "location location location location vehicle-type vehicle-type vehicle-type vehicle-type other-details other-details";
  }
  .location {
    grid-area: location;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    grid-template-areas: "location-1 seperator location-2";
  }
  .location-1 {
    padding-left: 10px;
    padding-right: 15px;
    grid-area: location-1;
    align-self: center;
    justify-self: left;
    text-align: left;
  }
  .location-2 {
    padding-left: 15px;
    padding-right: 10px;
    grid-area: location-2;
    align-self: center;
    justify-self: right;
    text-align: right;
  }
  .loc {
    margin-bottom: 0px;
  }
  .seperator {
    grid-area: seperator;
    align-items: center;
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    grid-template-areas: "dot-start line dot-end";
  }
  hr.line {
    width: 100%;
    background-color: #ccc;
    height: 1px;
    border: 0px solid black;
  }
  .dot-start {
    grid-area: dot-start;
    justify-self: center;
  }
  .dot-end {
    grid-area: dot-end;
    grid-row: 1/2;
    justify-self: center;
  }
  .vehicle-load {
    grid-area: vehicle-type;
    display: grid;
    align-items: center;
    justify-self: center;
    justify-items: center;
    grid-template-columns: max-content;
    grid-template-areas: "vehicle" "load-size";
  }
  .vehicle {
    grid-area: vehicle;
    display: grid;
    grid-template-columns: max-content min-content;
    grid-template-areas: "vehicle-icon vehicle-type";
    padding-bottom: 0.5em;
  }
  .vehicle-icon {
    grid-area: vehicle-icon;
    padding-right: 1em;
  }
  .vehicle-type {
    grid-area: vehicle-type;
    padding-left: 1em;
    text-align: center;
    align-self: center;
  }
  .load-size {
    grid-area: load-size;
    text-align: center;
    padding-top: 0.5em;
  }
  img {
    max-width: 8em;
  }
  .other-details {
    grid-area: other-details;
    display: grid;
    grid-template-rows: 1fr min-content 1fr;
    justify-items: center;
    align-items: center;
  }
  .gray-line {
    width: 60%;
    background-color: #ccc;
    height: 1px;
    border: 0px solid #545454;
  }
}
<div class="card-container">
  <div class="location">
    <div class="from-to overflow">
      <div class="location-1 ellipsis">
        <div class="loc ellipsis">
          <span class="h1-card">Thiruvananthapuram City</span><br>
          <span class="h3-card">Thiruvananthapuram
            <br>Kerala</span>
        </div>
      </div>
      <div class="location-2 ellipsis">
        <p class="loc ellipsis">
          <span class="h1-card">Venkatanarasimharajuvaripeta</span><br>
          <span class="h3-card">Chitoor
            <br>Andhra Pradesh</span>
        </p>
      </div>
    </div>
    <div class="seperator">
      <svg height="1.2em" width="1.2em" class="dot-start">
        <circle cx="0.6em" cy="0.74em" r="0.4em" stroke="black" stroke-width="0.06em" fill="lightgreen" />
      </svg>
      <div class="line"></div>
      <svg height="1.2em" width="1.2em" class="dot-end">
        <circle cx="0.6em" cy="0.5em" r="0.4em" stroke="red" stroke-width="0.12em" fill="white" />
      </svg>
    </div>
  </div>
  <div class="misc-details">
    <div class="vehicle-load">
      <div class="vehicle">
        <div class="vehicle-icon"> ICON ICON ICON </div>
        <div class="vehicle-type"><span class="h2-card">Trailer</span><br>
          <span class="h4-card">Load</span></div>
      </div>
      <div class="h2-card load-size">40' x 10' x 8' | 20 Tons</div>
    </div>
    <hr class="gray-line" />
    <div class="other-details">
      <div class="load-type h2-card">ODC Cargo</div>
      <hr class="gray-line" />
      <div class="loading-date h2-card">Tue | 22 Sep</div>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

css。文本溢出不起作用：省略号

来自分类Dev

如何防止CSS Grid井喷，使文本溢出省略号起作用

来自分类Dev

当宽度设置为百分比时，CSS省略号不起作用

来自分类Dev

宽度设置为百分比时，CSS省略号不起作用

来自分类Dev

CSS文字溢出：省略号在V-chip上不起作用

来自分类Dev

文本溢出：省略号在嵌套的flex容器中不起作用

来自分类Dev

CSS使用文本溢出时可防止DIV换行：省略号

来自分类Dev

为什么我的溢出和文本溢出：省略号代码在 MS Edge 中不起作用？

来自分类Dev

文字溢出省略号不起作用

来自分类Dev

CSS“文本溢出：省略号”，并将元素垂直居中

来自分类Dev

CSS 文本溢出省略号无法正确显示

来自分类Dev

表格单元格上的文本溢出省略号在IE8和IE9中不起作用

来自分类Dev

文本溢出：省略号在此元素上不起作用

来自分类Dev

文本溢出省略号和flex在Firefox上不起作用

来自分类Dev

在我的情况下，文本溢出省略号不起作用

来自分类Dev

如何在CSS中的省略号文本溢出旁边（右侧）添加文本？

来自分类Dev

文字溢出：省略号在有限的显示行中不起作用

来自分类Dev

CSS省略号在Bootstrap 3缩略图标题中不起作用

来自分类Dev

CSS省略号在Bootstrap 3缩略图标头中不起作用

来自分类Dev

CSS溢出和文本溢出不起作用？

来自分类Dev

CSS 文本溢出属性

来自分类Dev

CSS文本溢出属性省略号可以应用于垂直滚动文本吗？

来自分类Dev

带有文本省略号的表格单元中的contenteditable div在IE11中不起作用

来自分类Dev

CSS-添加省略号而不会出现文本溢出

来自分类Dev

将工具提示添加到具有CSS文本溢出的元素：省略号

来自分类Dev

CSS边框溢出到文本

来自分类Dev

使用jQuery检测CSS文本超低省略号

来自分类Dev

Flexbox和文本溢出：省略号混合使用吗？

来自分类Dev

Flexbox和文本溢出：省略号混合使用吗？

Related 相关文章

  1. 1

    css。文本溢出不起作用：省略号

  2. 2

    如何防止CSS Grid井喷，使文本溢出省略号起作用

  3. 3

    当宽度设置为百分比时，CSS省略号不起作用

  4. 4

    宽度设置为百分比时，CSS省略号不起作用

  5. 5

    CSS文字溢出：省略号在V-chip上不起作用

  6. 6

    文本溢出：省略号在嵌套的flex容器中不起作用

  7. 7

    CSS使用文本溢出时可防止DIV换行：省略号

  8. 8

    为什么我的溢出和文本溢出：省略号代码在 MS Edge 中不起作用？

  9. 9

    文字溢出省略号不起作用

  10. 10

    CSS“文本溢出：省略号”，并将元素垂直居中

  11. 11

    CSS 文本溢出省略号无法正确显示

  12. 12

    表格单元格上的文本溢出省略号在IE8和IE9中不起作用

  13. 13

    文本溢出：省略号在此元素上不起作用

  14. 14

    文本溢出省略号和flex在Firefox上不起作用

  15. 15

    在我的情况下，文本溢出省略号不起作用

  16. 16

    如何在CSS中的省略号文本溢出旁边（右侧）添加文本？

  17. 17

    文字溢出：省略号在有限的显示行中不起作用

  18. 18

    CSS省略号在Bootstrap 3缩略图标题中不起作用

  19. 19

    CSS省略号在Bootstrap 3缩略图标头中不起作用

  20. 20

    CSS溢出和文本溢出不起作用？

  21. 21

    CSS 文本溢出属性

  22. 22

    CSS文本溢出属性省略号可以应用于垂直滚动文本吗？

  23. 23

    带有文本省略号的表格单元中的contenteditable div在IE11中不起作用

  24. 24

    CSS-添加省略号而不会出现文本溢出

  25. 25

    将工具提示添加到具有CSS文本溢出的元素：省略号

  26. 26

    CSS边框溢出到文本

  27. 27

    使用jQuery检测CSS文本超低省略号

  28. 28

    Flexbox和文本溢出：省略号混合使用吗？

  29. 29

    Flexbox和文本溢出：省略号混合使用吗？

热门标签

归档