Çoğunlukla çalışır aşağıdaki; ana konu "Devamını oku ..." haber bir mektup kısmını örtbas olmasıdır. Ayrıca tanıtım elemanlarının bir demet kullanır ve JS gerektirir. Bu beni kirli hissettiriyor.

(Sınıf. Dize) dıştaki elemanı genel boyutunu ayarlamak için kullanılır. . Metni görüntülemek için metni tutar. . Dize ve soyundan hiyerarşisinde. Metin arasında büyük bir genişliğe sahip bir elementtir. Bu bir satırda. Metindeki tüm metin koyar. JS "Devamını oku ..." uyarı göstermek veya gizlemek için kullanılır.

<style type="text/css">
  .string {
    height: 1em;
    width: 25%;
    position: relative; /* create containing block for children */
    border: 1px solid black;
    overflow: hidden;
    background: white; /* or whatever, as long as it's not "transparent". */
  }
  .string .line {
    width: 5000px; /* long enough for you? */
  }
  .string .notice {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: none;
    background: inherit; /* so that the notice will completely cover up whatever's beneath */
  }
</style>

<div class="string">
  <div class="line"><span class="text">We prefer questions that can be answered, 
    not just discussed. Provide details. Write clearly and simply. If your 
    question is about this website, ask it on meta instead.</span></div>
</div>
<hr />
<div class="string">
  <div class="line"><span class="text">Lorem ipsum dolor sit amet.</span></div>
</div>

<script>
  function isOverflowed(elt) {
      return elt.offsetWidth > elt.parentNode.parentNode.clientWidth;
  }
  function getNotice(textElt) {
       try {
           return (textElt.parentNode.parentNode.getElementsByClassName('notice'))[0];
       } catch (e) {
           return {style: {}};
       }
  }
  function show(elt) {
      elt.style.display = 'block';
  }
  function hide(elt) {
      elt.style.display = 'none';
  }
  function showReadMoreNotices() {
    var text=document.getElementsByClassName('text');
    for (var i=0; i<text.length; ++i) {
      if (isOverflowed(text[i])) {
          show(getNotice(text[i]));
      } else {
          hide(getNotice(text[i]));
      }
    }
  }

  var strings = document.getElementsByClassName('string');
  var notice = document.createElement('div');
  notice.appendChild(document.createTextNode('\u2026Read more'));
  notice.className = 'notice';
  for (var i=0; i<strings.length; ++i) {
      strings[i].appendChild(notice.cloneNode(true));
  }

  showReadMoreNotices();
  /* use your favorite event registration method here. Not that the traditional 
   * model is my favorite, it's just simple.
   */
  window.onresize = showReadMoreNotices;
</script>

Nasıl bir dize kısaltabilir zaten asıl soru cevap, ancak:

Nasıl kısa so it doesnt go to the next line in a div tag dizeleri Kesme hakkında gitmek istiyorum

Bu çoğu durumda işe yaramaz.

örneğin:

iiiiiiiiii

wwwwwwwwww

Eğer sorun görüyor?

Lütfen karakter gibi aynı genişliğe varsa bu sadece çalışır:

iiiiiiiiii
wwwwwwwwww

PHP kullanarak, kesme gerçekleştirmek için wordwrap işlevini kullanabilirsiniz:

function truncate_to_length($text, $length, $text_if_longer = "...") 
{
    if (strlen($text) > $length) 
    {
        $text = wordwrap($text, $length);
        $text = substr($text, 0, strpos($text, "\n"));
        return $text . $text_if_longer;
    }
    return $text;
}

Boyutu maksimum değerden büyükse, soldaki karakterleri almak, boyutunu kontrol edin.

Leftmost # = Total size - size("... read more"). Then append the read more to the left most characters.

Jacob

Burada, alınan bir örnek http://snippetdb.com/php/truncate-string,

function Truncate ($str, $length=10, $trailing='...')  
{ 
      // take off chars for the trailing 
      $length-=strlen($trailing); 
      if (strlen($str) > $length)  
      { 
         // string exceeded length, truncate and add trailing dots 
         return substr($str,0,$length).$trailing; 
      }  
      else  
      {  
         // string was already short enough, return the string 
         $res = $str;  
      } 

      return $res; 
} 

Oooo ben tamamen çalışıyor ancak işleri bir şey geldi ... Kimliği paylaşmak istiyorum

div.string{

    height:15px;    	
    overflow:hidden;
}

Çünkü taşma .. o çizginin sonuna sığacak tüm kelimeyi gizlemek olacağı sorunu çözer ve yüksekliği sadece bir satır ayarlanır. Ancak yukarıdaki yine Rufinus tarafından gösterilen Sorun yapmak dosent:

iiiiiiiiiiiiii

wwwwwwwwwwwwww

I this question Birkaç ay önce sordu. Benim nihai çözüm de var.

Bu onları kesmeden dizeleri kısaltır smarty şablonları toplanan bir fonksiyonudur.

function str_short($string, $length = 80, $etc = '...',
                              $break_words = false, $middle = false)
{
if ($length == 0)
    return '';

if (strlen($string) > $length) {
    $length -= min($length, strlen($etc));
    if (!$break_words && !$middle) {
        $string = preg_replace('/\s+?(\S+)?$/', '', substr($string, 0, $length+1));
    }
    if(!$middle) {
        return substr($string, 0, $length) . $etc;
    } else {
        return substr($string, 0, $length/2) . $etc . substr($string, -$length/2);
    }
} else {
    return $string;
}

}

Tüm yazı bağlıdır. Tabii ki, bir monospace yazı tipini kullanabilirsiniz, ama bu bir çözüm değildir. Neyse, neden bunu yapmak istiyorsunuz? Eğer belirli bir yazı üzerinde çalışmak için yönetmek bile, bir kullanıcı bunu yok olabilir. Sonra farklı bir yazı kullanılacak ve her şey kırılabilir ...

Hatta bir tek aralıklı yazı olmayan bir tek aralıklı yazı tipi (PHP ile bunu yapmak neredeyse imkansız olurdu, bunu söylemek zor tam olarak ne kadar belli bir tarayıcıda olacak bir dize. Bunu yaptığını düşünebilirsiniz tek yolu gizli: bir tarayıcıda koymak ve taşma sonra kullanmak belirli bir genişlikte bir yayılma genişliğini ayarlamak için.

Eğer kullandığınız hangi tarayıcıya bağlı olarak, CSS bu bir satır hile yapabilir:

div.string {
    word-wrap: break-word;
}

Eğer tarayıcı kullanarak hangi true-type yazı biliyorsanız, size metnin genişliğini hesaplamak için GD kütüphanesinde imagettfbbox() kullanabilirsiniz. Sonra yineleme ve bu div sığar kadar metnin sonuna kapalı karakterleri bırakın.

Bu ben biliyorum, ama iş yok, çok verimli olmayabilir. Sen ince ayar ve özel çözüm için optimize olabilir.

<?
    $width = 280;	// max. width in pixels that the text should have
    $font = 'C:\Windows\Fonts\verdana.TTF';
    $text = 'The quick brown fox jumps over the lazy dog';

    function getWidth($text) {
    	list($x1, , $x2) = imagettfbbox(12, 0, $font, $text);
    	return $x2-$x1;
    }

    while (getWidth($text.'...') > $width) $text = substr($text, 0, -1);
?>

<style type='text/css'>
    #my_div {
        font-family: Verdana; 
        font-size: 12pt; 
        border: 1px solid black; 
        width: 280px; 
        padding: 0
    }
</style>

<div id='my_div'>
    <?=$text?>...
</div>