Tràn văn bản CSS: dấu chấm lửng; không làm việc?

Tôi không biết tại sao CSS đơn giản này không hoạt động ...

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Nên cắt bỏ khoảng "Thử nghiệm" thứ 4

text-overflow:ellipsis; chỉ hoạt động khi những điều sau là đúng:

• Độ rộng của phần tử phải được giới hạn bằng px(pixel). Chiều rộng trong %(phần trăm) sẽ không hoạt động.
• Các yếu tố phải có overflow:hiddenvà white-space:nowrapthiết lập.

Lý do bạn gặp vấn đề ở đây là vì yếu tố widthcủa bạn akhông bị hạn chế. Bạn có một widthcài đặt, nhưng vì phần tử được đặt thành display:inline(nghĩa là mặc định) nên nó bỏ qua nó và không có gì khác làm hạn chế chiều rộng của nó.

Bạn có thể khắc phục điều này bằng cách thực hiện một trong các cách sau:

• Đặt thành phần thành display:inline-blockhoặc display:block(có thể là trước đây, nhưng phụ thuộc vào nhu cầu bố trí của bạn).
• Đặt một trong các thành phần chứa của nó thành display:blockvà cung cấp cho phần tử đó cố định widthhoặc max-width.
• Đặt phần tử thành float:lefthoặc float:right(có thể là trước đây, nhưng một lần nữa, hoặc sẽ có tác dụng tương tự như liên quan đến dấu chấm lửng).

Tôi đề nghị display:inline-block, vì điều này sẽ có tác động tài sản thế chấp tối thiểu đối với bố cục của bạn; nó hoạt động rất giống với display:inlinecái mà nó hiện đang sử dụng liên quan đến bố cục, nhưng cũng thoải mái thử nghiệm với các điểm khác; Tôi đã cố gắng cung cấp càng nhiều thông tin càng tốt để giúp bạn hiểu cách thức những thứ này tương tác với nhau; một phần lớn của sự hiểu biết CSS là về cách hiểu các phong cách khác nhau làm việc cùng nhau.

Đây là một đoạn mã với mã của bạn, display:inline-blockđược thêm vào, để cho thấy mức độ gần gũi của bạn.

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Tài liệu tham khảo hữu ích:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Câu trả lời được chấp nhận là tuyệt vời. Tuy nhiên, bạn vẫn có thể sử dụng %chiều rộng và đạt được text-overflow: ellipsis. Giải pháp rất đơn giản:

display: inline-block; /* for em, a, span, etc (inline by default) */
text-overflow: ellipsis;
width: calc (80%); /* The trick is here! */

Dường như bất cứ khi nào bạn sử dụng calc, giá trị cuối cùng được hiển thị bằng pixel tuyệt đối, do đó sẽ chuyển đổi 80%thành một cái gì đó giống như 800pxcho một 1000pxthùng chứa băng thông. Do đó, thay vì sử dụng width: [YOUR PERCENT]%, sử dụng width: calc([YOUR PERCENT]%).

Vì vậy, nếu bạn gặp phải câu hỏi này vì bạn đang gặp khó khăn khi cố gắng để các dấu chấm lửng hoạt động bên trong một display: flexthùng chứa, hãy thử thêm min-width: 0vào thùng chứa ngoài cùng tràn ra cha mẹ của nó ngay cả khi bạn đã đặt overflow: hiddennó và xem cách nó hoạt động cho bạn.

Thêm chi tiết và một ví dụ hoạt động trên codepen này bởi aj-foster . Hoàn toàn làm được mẹo trong trường hợp của tôi.

Cũng đảm bảo word-wrapđược đặt thành bình thường cho IE10 trở xuống.

Các tiêu chuẩn được tham chiếu dưới đây xác định hành vi của thuộc tính này là phụ thuộc vào cài đặt của thuộc tính "bọc văn bản". Tuy nhiên, cài đặt wordWrap luôn hiệu quả trong Windows Internet Explorer vì Internet Explorer không hỗ trợ thuộc tính "bao bọc văn bản".

Do đó, trong trường hợp của tôi, word-wrapđã được đặt thành từ ngắt (được kế thừa hoặc theo mặc định?) Gây ra text-overflowhoạt động trong FF và Chrome, nhưng không hoạt động trong IE.

thông tin ms về tài sản bọc từ

anchor, span... thẻ là các phần tử nội tuyến theo mặc định, Trong trường hợp thuộc tính phần tử nội tuyến widthkhông hoạt động. Vì vậy, bạn phải chuyển đổi yếu tố của bạn để một trong hai inline-blockhoặc block levelcác yếu tố

Bao gồm bốn dòng được viết sau khi thông tin cho dấu chấm lửng hoạt động

.app a
{
 color: #fff;
 font: bold 15px/18px Arial;
 height: 18px;
 margin: 0 5px 0 5px;
 padding: 0;
 position: relative;
 text-align: center;
 text-decoration: none;
 width: 140px;

 /* 
 Note: The Below 4 Lines are necessary for ellipsis to work.
 */

 display: block;/* Change it as per your requirement. */
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

Thêm display: block;hoặc display: inline-block;vào#User_Apps_Content .DLD_App a

bản giới thiệu

Bạn chỉ cần thêm một dòng css:

.app a {
   display: inline-block;
}

Trong bootstrap 4 , bạn có thể thêm một .text-truncatelớp để cắt bớt văn bản bằng dấu chấm lửng.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 250px;">
  The quick brown fox jumps over the lazy dog.
</span>

Phải chứa

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

PHẢI KHÔNG chứa

display: inline

Nên bao gồm

position: sticky

Bạn cũng có thể thêm float: left; bên trong lớp này #User_Apps_Content .DLD_App a

Tôi đã phải thực hiện một số mô tả hình elip dài (chỉ có một làn) trong khi phản ứng nhanh, vì vậy giải pháp của tôi là để cho văn bản được bọc (thay vì white-space: nowrap) và thay vì chiều rộng cố định tôi đã thêm chiều cao cố định:

span {
  display: inline-block;
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
  // OPTIONAL LINES
  width: 75%;
  background: green;
  //  white-space: normal; default
}

<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au
</span>

Đây là mã cho phép:

overflow: hidden;
text-overflow: ellipsis;

tràn: ẩn là bắt buộc

Tôi đã đối mặt với cùng một vấn đề và có vẻ như không có giải pháp nào ở trên hoạt động cho Safari. Đối với trình duyệt không phải safari, điều này hoạt động tốt:

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Đối với Safari, đây là một trong những hoạt động cho tôi. Lưu ý rằng truy vấn phương tiện để kiểm tra xem trình duyệt có phải là Safari có thể thay đổi theo thời gian hay không, vì vậy chỉ cần sửa lại truy vấn phương tiện nếu nó không hoạt động với bạn. Với thuộc line-clamptính, cũng có thể có nhiều dòng trên web có dấu chấm lửng, xem tại đây .

// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
  @media {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
  }
}

https://stackoverflow.com/a/53784508/5626747

Không thể nhận xét do danh tiếng, vì vậy tôi đang đưa ra một câu trả lời khác:

Trong trường hợp này, bạn cũng sẽ phải xóa thuộc tính được đề xuất chung display: block;khỏi phần tử bạn đặt text-overflow: ellipsis;, hoặc nó sẽ bị cắt mà không có ... ở cuối.

Viết những điều này trong quy tắc css của bạn.

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;