Tôi đang làm trang web đáp ứng cho trường học và câu hỏi của tôi là:

Làm cách nào để đặt độ dài ký tự tối đa của các câu (bằng CSS) trên trang web của tôi (như 75 ký tự) mà khi tôi có màn hình rất lớn, các câu sẽ không vượt quá 75 ký tự.

Tôi đã thử một chiều rộng tối đa nhưng điều đó làm rối bố cục của tôi. Tôi đang sử dụng flexbox và các truy vấn phương tiện để làm cho nó phản hồi.

Bạn luôn có thể sử dụng phương pháp cắt ngắn bằng cách đặt max-widthvà tràn ellipsisnhư thế này

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

Một ví dụ: http://jsfiddle.net/3czeyznf/

Đối với một cắt ngắn nhiều dòng có một cái nhìn vào một flexgiải pháp. Một ví dụ với cắt ngắn trên 3 hàng.

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

Một ví dụ: https://codepen.io/srekoble/pen/EgmyxV

Có một 'giá trị độ dài' CSS của ch.

Từ MDN

Đơn vị này đại diện cho chiều rộng, hay chính xác hơn là thước đo trước của glyph '0' (không, ký tự Unicode U + 0030) trong phông chữ của phần tử.

Điều này có thể gần đúng những gì bạn đang sau.

p {
  overflow: hidden;
  max-width: 75ch;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.</p>

Hãy thử điều này để cắt bớt các ký tự sau khi đặt nó thành chiều rộng tối đa. Tôi đã sử dụng 75ch trong trường hợp này

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75ch;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc.</p>

Đối với cắt ngắn đa dòng, xin vui lòng theo liên kết.

Một ví dụ: https://codepen.io/srekoble/pen/EgmyxV

Chúng tôi sẽ sử dụng css webkit cho việc này. Nói tóm lại, WebKit là một công cụ kết xuất trình duyệt web HTML / CSS cho Safari / Chrome. Điều này có thể cụ thể hơn vì mọi trình duyệt đều được hỗ trợ bởi công cụ kết xuất để vẽ trang web HTML / CSS.

mã ví dụ:

.limited-text{
    white-space: nowrap;
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
}

<p class="limited-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>

    

Với Chrome, bạn có thể đặt số lượng dòng được hiển thị với " -webkit-line-Kẹp ":

     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;  /* Number of lines displayed before it truncate */
     overflow: hidden;

Vì vậy, đối với tôi, nó được sử dụng trong một tiện ích mở rộng để nó hoàn hảo, thêm thông tin tại đây: https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-st dán-up -broken-865413f16e5

Điều đó là không thể với CSS, bạn sẽ phải sử dụng Javascript cho điều đó. Mặc dù bạn có thể đặt độ rộng của p thành tối đa 30 ký tự và các chữ cái tiếp theo sẽ tự động xuất hiện nhưng một lần nữa điều này sẽ không chính xác và sẽ thay đổi nếu các ký tự viết hoa.

HTML

<div id="dash">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a urna ac
quam.</p>
</div>

jQuery

var p = $('#dash p');
var ks = $('#dash').height();
while ($(p).outerHeight() > ks) {
  $(p).text(function(index, text) {
    return text.replace(/\W*\s(\S)*$/, '...');
  });
}

CSS

#dash {
  width: 400px;
  height: 60px;
  overflow: hidden;
}

#dash p {
  padding: 10px;
  margin: 0;
}

KẾT QUẢ

Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et ...

Jsfiddle

Giải pháp CSS thuần túy để cắt bớt các ký tự nhiều dòng

Tôi đã có một vấn đề tương tự và tìm thấy giải pháp css tuyệt vời này từ Hackingui.com . Bạn có thể đọc bài viết để biết thông tin nhưng dưới đây là mã chính.

Tôi đã thử nghiệm nó và nó hoạt động hoàn hảo. Hy vọng rằng ai đó thấy nó hữu ích trước khi chọn các tùy chọn phía máy chủ hoặc JS

  /* styles for '...' */ 
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em; 
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;  
  /* place for '...' */
  margin-right: -1em;
  padding-right: 1em;
}

/* create the ... */
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}

/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}

Lưới CSS hiện đại Trả lời

Xem mã làm việc đầy đủ trên CodePen . Cho HTML sau:

<div class="container">
    <p>Several paragraphs of text...</p>
</div>

Bạn có thể sử dụng CSS Grid để tạo ba cột và yêu cầu container chứa chiều rộng tối đa 70 ký tự cho cột giữa có chứa đoạn văn của chúng tôi.

.container
{
  display: grid;
  grid-template-columns: 1fr, 70ch 1fr;
}

p {
  grid-column: 2 / 3;
}

Đây là giao diện của nó (Checkout CodePen cho một ví dụ hoạt động đầy đủ):

Dưới đây là một ví dụ khác mà bạn có thể sử dụng minmax để đặt phạm vi giá trị. Trên màn hình nhỏ, chiều rộng sẽ được đặt thành 50 ký tự và trên màn hình lớn, nó sẽ rộng 70 ký tự.

.container
{
  display: grid;
  grid-template-columns: 1fr minmax(50ch, 70ch) 1fr;
}

p {
  grid-column: 2 / 3;
}

Bài đăng này là một giải pháp CSS, nhưng bài đăng này khá cũ, vì vậy trong trường hợp những người khác vấp phải điều này và đang sử dụng một khung công tác JS hiện đại như Angular 4+, có một cách đơn giản để thực hiện điều này thông qua Angular Faucet mà không cần phải loay hoay với CSS.

Có lẽ cũng có những cách "Phản ứng" hoặc "Vue" để làm việc này. Đây chỉ là để giới thiệu làm thế nào nó có thể được thực hiện trong một khuôn khổ.

cắt ngắn-text.pipe.ts

/**
 * Helper to truncate text using JS in view only.
 *
 * This is pretty difficult to do reliably with CSS, especially when there are
 * multiple lines.
 *
 * Example: {{ value | truncateText:maxLength }} or {{ value | truncateText:45 }}
 *
 * If maxLength is not provided, the value will be returned without any truncating. If the
 * text is shorter than the maxLength, the text will be returned untouched. If the text is greater
 * than the maxLength, the text will be returned with 3 characters less than the max length plus
 * some ellipsis at the end to indicate truncation.
 *
 * For example: some really long text I won't bother writing it all ha...
 */
@Pipe({ name: 'truncateText' })
export class TruncateTextPipe implements PipeTransform {
  transform(value: string, ...args: any[]): any {
    const maxLength = args[0]
    const maxLengthNotProvided = !maxLength
    const isShorterThanMaximumLength = value.length < maxLength
    if (maxLengthNotProvided || isShorterThanMaximumLength) {
      return value
    }
    const shortenedString = value.substr(0, maxLength - 3)
    return `${shortenedString}...`
  }
}

app.component.html

<h1>{{ application.name | truncateText:45 }}</h1>

Hãy thử giải pháp của tôi với 2 cách khác nhau.

<div class="wrapper">
      <p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

<div class="wrapper">
  <p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 400px;
  margin: 50px auto;
}

.demo-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.demo-2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
}