Howto обрезать текст в div

Я хочу усечь текст моего сообщения.
Я использовал некоторые jquery plugins для достижения этой цели, но проблема заключается в
что сначала весь текст нагрузки на клиенте, а затем Javascript
выполняет код обрезает текст и в результате возникает некрасивая
эффект, где вы можете увидеть весь текст за миллисекунды в зависимости от
на вашем соединении, прежде чем он будет усечен.Howto обрезать текст в div

Должен ли я усекать также на сервере?
Я использую codeigniter с wordpress, и я подумал об использовании
the_excerpt или что-то еще, но это не изящно.

Любые идеи?

источник

2011-02-02 Argiropoulos Stavros

возможно дубликат [Ограничение количества символов, отображаемых в ячейке таблицы] (HTTP://stackoverflow.com/questions/4541412/limiting-number-of-characters-displayed-in-table-cell) – Gordon

Это может быть возможным использовать этот плагин JQuery, если вам нужно больше ссылке: Bodacity

Это позволит вам если вам это нужно, обратитесь в ссылку «Подробнее».

С другой стороны, если это большой фрагмент текста, браузер все равно загрузит его.

источник

2011-04-08 03:06:56

Усечение текста всегда должно выполняться на сервере. Особенно, если они являются большими частями текста.

источник

2011-02-02 09:25:54

Это становится затруднительным, если вы хотите ограничить отображаемый размер текста, например он должен вписываться в поле размером 540 x 300 пикселей, потому что строки и форматирование HTML будут играть роль в том, как отображается усеченный текст. – Jimbo

-1 «всегда» - это сильная работа для чего-то, что просто не соответствует действительности. –

substr_replace выполнит это для вас

http://php.net/manual/en/function.substr-replace.php

- правку из-за новой информации -

Хорошо, я думаю, что это то, что вы после того, как то:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Temp</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $('#clippedmore a').click(function(){ 
      $('#clipped').css('height','auto'); 
      $('#clippedmore').hide(); 
     }); 
     }); 
    </script> 
    <style style="text/css"> 
     #clipped { height: 80px; overflow: hidden; } 
    </style> 
    </head> 

    <body> 
    <div id="clipped"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
    <div id="clippedmore"> 
     <p><a href="javascript:;">Show more...</a></p> 
    </div> 
    </body> 

</html>

источник

2011-02-02 09:26:31

+1 Это хорошо, но длина текста не является постоянной, означающей, что 100x100 div может принимать, скажем, 100-120 символов в зависимости от длины слова внутри него. Я хочу использовать все пространство внутри div, если вы знаете, что я средний –

Хорошо. Вероятно, полезно будет использовать метод переполнения: скрытый метод, показанный toddles2000. Проблема в том, что если вы можете увидеть половину буквы, где она отключается, если вы не используете text-align: оправдайте также. Вам нужно быть точным с вашими размерами шрифта и высотой линии, чтобы убедиться, что это не выглядит немного странным. –

Вы правы, но, как я сказал toddles, я хочу также ссылку «больше» в конце текста, так что это не так просто. –

Если вы усекаете текст, потому что хотите установить высоту только для целей пользовательского интерфейса, простым решением будет обернуть ваш контент в div, установить высоту и использовать ov erflow: скрытый, чтобы скрыть все остальное. Это имеет то преимущество, что вы также можете расширить содержимое с помощью селекторов css.

html page 
<div class="mywrapper">your content goes here..</div> 

css file 
.mywrapper { 
overflow: hidden; 
width: 540px; 
height: 300px; 
}

источник

2011-02-02 09:32:57 toddles2000

добро пожаловать в SO и приятный простой ответ! :) – acm

+1 Спасибо за ваш ответ. Дело в том, что я хочу, чтобы в конце усеченного текста была добавлена ссылка «больше». –

Попробуйте следующее в PHP на стороне сервера:

$test = 'something'; 
if(strlen($test)>12) { 
    echo substr($test,0,12)."..."; 
} else { 
    echo $test; 
}

источник

2011-02-02 09:34:25 Sevenearths

Хорошо так это то, что я поставил вместе, и это, кажется, работает:

function truncate_html($s, $l, $e = '&hellip;', $isHTML = true) { 
$s = trim($s); 
$e = (strlen(strip_tags($s)) > $l) ? $e : ''; 
$i = 0; 
$tags = array(); 

if($isHTML) { 
    preg_match_all('/<[^>]+>([^<]*)/', $s, $m, PREG_OFFSET_CAPTURE | PREG_SET_ORDER); 
    foreach($m as $o) { 
     if($o[0][1] - $i >= $l) { 
      break;     
     } 
     $t = substr(strtok($o[0][0], " \t\n\r\0\x0B>"), 1); 
     if($t[0] != '/') { 
      $tags[] = $t;     
     } 
     elseif(end($tags) == substr($t, 1)) { 
      array_pop($tags);     
     } 
     $i += $o[1][1] - $o[0][1]; 
    } 
} 
$output = substr($s, 0, $l = min(strlen($s), $l + $i)) . (count($tags = array_reverse($tags)) ? '</' . implode('></', $tags) . '>' : '') . $e; 
return $output;

}

truncate_html('<p>I really like the <a href="http://google.com">Google</a> search engine.</p>', 24);

источник

2013-11-26 11:40:03

ответ

Смежные вопросы