Как обрезать текст в div - PullRequest
Новая
       32

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

1 голос
/ 02 февраля 2011

Я хочу обрезать текст моего сообщения.
Для этого я использовал jquery-плагины , но проблема в
что сначала весь текст загружается на клиент, а затем javascript
выполняет код для усечения текста и в результате появляется уродливый
эффект, при котором вы можете увидеть весь текст за миллисекунды в зависимости
в вашем соединении, прежде чем оно будет усечено.

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

Есть идеи?

Ответы [ 6 ]

9 голосов
/ 02 февраля 2011

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

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

css file
.mywrapper {
 overflow: hidden;
 width: 540px;
 height: 300px;
}
4 голосов
/ 02 февраля 2011

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

3 голосов
/ 02 февраля 2011

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>
0 голосов
/ 26 ноября 2013

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

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);
0 голосов
/ 08 апреля 2011

Можно использовать этот плагин jQuery, если вам нужна дополнительная ссылка: Bodacity

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

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

0 голосов
/ 02 февраля 2011

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

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