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

Question

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

我试过以下方法：

父网格容器：

overflow: hidden;

子网格项：[=18=]

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>

Answer 1

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

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

确保将 class 添加到 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>

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

CSS text-overflow: ellipsis not working in when using CSS grid in Angular 8

css

overflow

ellipsis

css-grid