Thu gọn nội dung bài viết

#1

Trong một tờ báo, một bài viết thường có 2 trường là Title và Content.
Khi hiển thị 1 list các bài viết, em muốn show Title và một vài câu đầu của Content nhưng phải hết câu đó chứ không phải fix height thì câu cuối có thể không hết.
M.n có thể mách ý tưởng hoặc keyword cho em để em search không ?

Em cám ơn.

1 Like
#2

Bạn có thể nói rõ hơn về dự án của bạn ko? Bạn làm web tin tức, hay gì vì có những trình soanj thảo bài viết bạn sẽ được bôi đen đoạn giới thiệu và chương trình tự động lấy đó làm đoạn giới thiệu cho một bài viêts hoặc bài báo bạn nhé

#3

Cuối câu thường kết thúc bằng dấu chấm. Bạn tìm dấu chấm dể tin rằng câu cuối đó đã hoàn thành. Nếu bạn không chắc lấy bao nhiêu câu vì độ dài câu khác nhau thì tốt hơn hết là bạn định nghĩa tối đa số từ cần lấy.

Ví dụ: nếu hai câu mà đã đạt được 20 từ rồi thì chỉ lấy hai câu. Nhưng nếu hai câu mà chỉ có 15 từ, mà câu thứ 3 cũng chỉ có 7 từ, tức cũng 22 từ, so với 20 từ thì tạm chấp nhận, lấy luôn câu thứ 3.

Nếu dùng PHP thì explore các string ra mảng để đếm, sau đó implode lại để xuất ra. Còn xuất ra dùng jQuery thì mình chịu, chỉ biết chút ít JavaScript thuần thôi.

Túm lại bạn cần xử lý chuỗi.

1 Like
#4

gỉa sử ta có content sau:

<article>
<h4 class="title">Vu_Xuan_Loc</h4>
<p class="content">
Trong một tờ báo, một bài viết thường có 2 trường là Title và Content.
Khi
 hiển thị 1 list các bài viết, em muốn show Title và một vài câu đầu của
 Content nhưng phải hết câu đó chứ không phải fix height thì câu cuối có
 thể không hết.
M.n có thể mách ý tưởng hoặc keyword cho em để em search không ?
</p>
</article>

cách 1: áp dụng style sau sẽ hiển thị 2 dòng đầu của content.


article .content{
width: 100%;
height: 4em;
overflow: hidden;
text-overflow: ellipsis;
}

code: https://jsfiddle.net/vay0zzed/

cách 2: dùng js để lấy ra n từ đầu tiên (mình dùng jquery cho dễ nha :slight_smile: )

function trimText(str ,wordCount){
        var strArray = str.split(' ');
    var subArray = strArray.slice(0, wordCount);
    var result = subArray.join(" ");
    return result + '...';
}

var str = $('article .content').text();
var result = trimText(str, 20);
$('article .content').text(result);

code: https://jsfiddle.net/2Ltfk3LL/

cách 3: cắt ra n câu đầu (đúng với yêu cầu của thớt)

function trimSentence(str, sentenceCount){
        var strArray = str.split('.');
        var subArray = strArray.slice(0, sentenceCount);
    var result = subArray.join(".");
    return result + '...';
}

var str = $('article .content').text();
var result = trimSentence(str, 2);
$('article .content').text(result);

code: https://jsfiddle.net/5h9ncjLg/

(tiện thể cho mình hỏi có ai biết nhúng html vào post ko nhỉ)

1 Like
#5

Đây là cách mình thường dùng, chỉ dùng css thôi và nó không cần chỉ định chiều cao, chỉ cần thiết lập số dòng cần hiển thị. Ví dụ:

<p class="content">
Trong một tờ báo, một bài viết thường có 2 trường là Title và Content.
Khi
 hiển thị 1 list các bài viết, em muốn show Title và một vài câu đầu của
 Content nhưng phải hết câu đó chứ không phải fix height thì câu cuối có
 thể không hết.
M.n có thể mách ý tưởng hoặc keyword cho em để em search không ?
</p>

.content{
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

Lưu ý: -webkit-line-clamp: 3 tức là sẽ hiển thị 3 dòng nội dung thôi, nếu nội dung dài hơn 3 dòng sẽ tự động thêm dấu …
Demo: https://jsfiddle.net/s29a6w2t/

2 Likes
#6

Cám ơn vì đã góp ý nhưng mà để thế hơi thô vì có khi từ cuối lại có khi dở dang.
Ah với lại để mỗi -webkit định cho mỗi chromium dùng thôi ah :smile: :smile:

#7

hay quá, em rất cám ơn bác

#8

Cám ơn bác :)) em sẽ cải tiến thêm thuật toán

#9

Em dùng django, a có thể nói cho em tên trình soạn thảo để e tìm hiểu không, em mới biết đến ckeditor.

#10

Mình update lại câu trả lời nhé:

.content{
  overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3; /* number of lines to show */
   line-height: 1.4em;        /* fallback */
   max-height: 4.2em;       /* cái này phải = line-height x 2 */
}

Cách này sẽ giúp nội dung hiển thị tốt trên các trình duyệt khác luôn (đã test trên firefox + chrome) :smile:

1 Like
#11

Nếu làm bằng CSS thì chỉ có thể căn bằng số dòng. Nếu bạn muốn nó phải hết câu nhưng câu đó lại quá dài không fit hết thì sao? Cái này có thể cắt bằng JS hoặc cắt trước bằng backend code, sau đó mới đẩy lên template.
Vụ này cũng là lí do tại sao một số trang blog bắt tự nhập 1 đoạn description ngắn cho bài viết, để chủ động chứ ko cần phụ thuộc vào content.

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?