Làm cách nào để chỉ ra văn bản dài thành một cột cố định nhỏ hơn với CSS?

Làm cách nào để vừa với văn bản dài thành cột có chiều rộng cố định, nơi tôi chỉ có chỗ cho một dòng văn bản? Văn bản cần phải được cắt theo chiều rộng cố định (cho phép nói 100px) và tôi muốn thêm dấu chấm "..." ở cuối. Một cái gì đó như thế này ví dụ:Làm cách nào để chỉ ra văn bản dài thành một cột cố định nhỏ hơn với CSS?

Với chuỗi:

Some really long string that I need to fit in there!

đầu ra mong muốn trong chiều rộng cố định cột nên là:

Some really long string...

Nguồn

2010-01-21 Primoz Rome

Bạn có thể làm điều này với một mình CSS:

.box { 
    -o-text-overflow: ellipsis; /* Opera */ 
    text-overflow: ellipsis; /* IE, Safari (WebKit) */ 
    overflow:hidden;    /* don't show excess chars */ 
    white-space:nowrap;   /* force single line */ 
    width: 300px;     /* fixed width */ 
}

Lưu ý: Bạn sẽ muốn kiểm tra vào sự hỗ trợ trình duyệt mới nhất.

Nguồn

2010-01-21 12:12:17 Gordon

Cool! Tôi đã viết một giải pháp làm việc trước khi tôi nhìn thấy câu trả lời của bạn. https: //gist.github.com/708155 – geon

Điều này: "text-overflow: ellipsis;" là tất cả những gì cần thiết hiện nay trong tất cả các phiên bản hiện tại của IE, Opera, Firefox, Chrome & Safari vì vậy chỉ cần xung quanh công việc (và "-o-text-overflow:") cho hỗ trợ trình duyệt cũ hơn. – GazB

Điều gì về giải pháp văn bản nhiều dòng? Điều này sẽ chỉ hoạt động cho một dòng văn bản. Ví dụ gì nếu tôi có vị trí cho 3 dòng văn bản và cây đũa phép '...' được thêm vào dòng cuối cùng trong đó văn bản được cắt bớt? –

Tôi đã có một vấn đề tương tự, cách tôi giải quyết nó là để cắt chuỗi xuống còn 60 ký tự và nối thêm '...' vào cuối chuỗi.

Một giải pháp xấu xí? Có, nhưng trừ khi có một giải pháp jQuery nó có lẽ là đặt cược tốt nhất của bạn.

Nếu bạn đang sử dụng Smarty, đây là cách tôi giải quyết vấn đề:

{$my_string|truncate:60}

Nguồn

2010-01-21 11:24:50

Dưới đây là một chức năng tôi sử dụng để cắt dây. Giống như hầu hết các đề xuất ở đây, nó sử dụng chất nền để cắt xén chuỗi, nhưng nó sẽ tránh tách chuỗi giữa:

function truncate_text($string, $min_chars, $append = ' &hellip;') { 
    $chars = strpos($string, " ", $min_chars); 
    $truncated_string = substr($string, 0, $chars) . $append; 
    return $truncated_rstring; 
}

Nguồn

2010-01-21 11:46:48

Tôi nghĩ rằng văn bản cắt đơn giản sau ký tự N không phải là thứ bạn đang tìm kiếm . Nó không phải là một giải pháp vì văn bản sau có cả độ dài 15 ký tự: iiiiiiiiiiiiiii, mmmmmmmmmmmmmmm - chú ý rằng từ "thứ hai" dài hơn khoảng ba lần so với chữ đầu tiên.

JavaScript có thể là một giải pháp:

Đầu tiên chuẩn bị của bạn mark-up:
```
<p id="abc">{TEXT}</p> 
```
đâu {TEXT} được văn bản của bạn cắt ngắn đến 150 ký tự + ...

Bây giờ khi chúng ta đã có cơ sở tốt cho JavaScript, chúng tôi có thể cố gắng thực hiện những gì bạn đang tìm kiếm:

<html> 
<head> 
    <style type="text/css"> 
     #abc { 
      width: 100px; 
     } 
    </style> 
    <script type="text/javascript"> 
     document.addEventListener("DOMContentLoaded", function() { 
      var ref = document.getElementById("abc"); 
      var text = ref.text; 

      ref.removeChild(ref.firstChild); 
      ref.appendChild(document.createTextNode("...")); 

      var maxHeight = ref.offsetHeight; 

      var pos = 0; 
      while (ref.offsetHeight <= maxHeight) { 
       var insert = text.substring(0, ++pos) + "..."; 

       var finalReplace = ref.replaceChild(document.createTextNode(insert), ref.firstChild); 
      } 

      ref.replaceChild(finalReplace, ref.firstChild); 
     }, false); 
    </script> 
</head> 
<body> 
    <p id="abc">My very, very, very, very, very, very, very long text...</p> 
</body> 
</html>

Nguồn

2010-01-21 11:48:21 Crozin

Chỉ với một số CSS như câu trả lời của Gordon. Chỉ cần thêm display:block sở hữu đối với một phần tử nội tuyến như <a> hoặc <p>:

a#myText{ 
    display: block; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
    width: 300px; 
}

Bạn có thể sử dụng nó với nhiều trình duyệt như bạn có thể nhìn thấy trên liên kết này: http://caniuse.com/#search=text-overflow

Nguồn

2014-09-04 10:39:50

Làm cách nào để chỉ ra văn bản dài thành một cột cố định nhỏ hơn với CSS?

Trả lời

Các vấn đề liên quan