Bir webapp tarafından yazdırılan bir dize genişliğinin belirlenmesi

6 Cevap php

Benim (PHP) webapp, ben son aramaların geçmişini tutar Sitemde bir parçası var. En son sorgular bir yan kutusunda gösterilir olsun. Sorgu metin çok uzun ise, onu kesecek ve elips gösterir. Örn: "Benim çok uzun sorgu ..."

Şu anda, karakter belli bir sayıdan sonra kesecek. Yazı tipi tek tip olmadığından, tüm Ben en bir sorgu tüm W adlı bir sorgu daha dardır. Ben önceki tüm Elipslere aynı genişliği hakkında olmalarını isterim. Herhangi bir dize için elips baştan piksel aynı sayıda meydana böylece elde edilen dize yaklaşık genişliğini almak için bir yolu var mı? CSS bir yol var mı? PHP mi? Bu daha iyi JavaScript tarafından ele olurdu?

6 Cevap

Burada başka üzerine alacak ve üç nokta olmadan yaşamak zorunda değilsiniz!

<html>
<head>

<style>
div.sidebox {
    width: 25%;
}

div.sidebox div.qrytxt {
    height: 1em;
    line-height: 1em;
    overflow: hidden;
}

div.sidebox div.qrytxt span.ellipsis {
    float: right;
}
</style>


</head>

<body>

<div class="sidebox">
    <div class="qrytxt">
    	<span class="ellipsis">&hellip;</span>
    	Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
    </div>
    <div class="qrytxt">
    	<span class="ellipsis">&hellip;</span>
    	Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
    </div>
    <div class="qrytxt">
    	<span class="ellipsis">&hellip;</span>
    	Short text. Fail!
    </div>
</body>

</html>

Bu ile bir kusur metin tam olarak görüntülenir kadar kısa ise, elips yine de gösterilecektir vardır.

[EDIT: 2009/06/26]

Güç-Coder önerisiyle ben bu biraz revize ettik. ": Inline-block ekranda" qrytxt div niteliği yalnızca iki değişiklik, belge türüne eklenmesi (notlara bakınız aşağıda) ve eklenmesi gerçekten vardır. İşte şimdi böyle görünüyor ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <style>
        div.sidebox 
        {
            width: 25%;
        }

        div.sidebox div.qrytxt
        {
            height: 1em;
            line-height: 1em;
            overflow: hidden;
            display: inline-block;
        }

        div.sidebox div.qrytxt span.ellipsis
        {
            float: right;
        }
</style>
</head>

<body>
    <div class="sidebox">
        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Short text. FTW
        </div>
    </div>
</body>
</html>

Notlar:

  • IE 8.0, Opera 9, FF 3 Görüntülenen

  • Düzgün çalışması için: A dokumantipi "inline-block ekranı" almak için IE için gereklidir.

  • Qrytxt div taşma uzun bir sözcük meydana gelirse, üç nokta ve son görünür kelime arasında geniş bir boşluk var oluyor. Sen örnek görüntüleme ve küçük artışlarla tarayıcı genişliği boyutlandırma bu görebilirsiniz. (Bu belki de orijinal örnekte var, ben sadece o bunu fark etmemiş olabilir)

Yani yine, kusurlu bir CSS-tek çözüm. Javascript etkisi mükemmel alabilirsiniz tek şey olabilir.

[EDIT: 2009/06/27]

İşte tarayıcı belirli uzantıları kullanan bir başka alternatif.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <style>
    	div.sidebox 
    	{
    		width: 26%;
    	}

    	div.sidebox div.qrytxt
    	{
    		height: 1em;
    		line-height: 1em;
    		overflow: hidden;
    		text-overflow:ellipsis;
    		-o-text-overflow:ellipsis;
    		-ms-text-overflow:ellipsis;
    		-moz-binding:url(ellipsis-xbl.xml#ellipsis);
    		white-space:nowrap;
    	}
    </style>
</head>

<body>
    <div class="sidebox">
    	<div class="qrytxt">
    		Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
    	</div>

    	<div class="qrytxt">
    		Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
    	</div>

    	<div class="qrytxt">
    		Short text. FTW
    	</div>
    </div>
</body>
</html>

Yukarıdaki örnek çalışması için sırayla, ellipsis-xbl.xml ,-moz-bağlayıcı kural tarafından başvurulan xml dosyası oluşturmanız gerektiğini unutmayın. Bu aşağıdaki xml içermelidir bulunuyor:

<?xml version="1.0" encoding="UTF-8"?>
  <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <binding id="ellipsis">
      <content>
        <xul:window>
          <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
        </xul:window>
      </content>
    </binding>
  </bindings>

Ayrıca oldukça kolay javascript biraz kullanabilirsiniz:

document.getElementByID("qrytxt").offsetWidth;

size piksel bir elemanın genişliğini vermek ve hatta IE6 içinde çalışmaktadır. CSS manipülasyon biraz JavaScript basit bir mantıksal test / gizlemek için kullanılan olabilir, her sorgunun sonuna üç nokta içeren bir yayılma eklerseniz gerektiği gibi onlara göstermek.

CSS bir yol var mı?

Hayır

PHP mi?

Hayır

-

Her karakter için yazı tipi ölçülerine almak olurdu yapmak, ve dize tüm harfleri bunları uygulamak. Eğer sunucu üzerinde Imagemagick gibi bir çizim / render kütüphanesi kullanarak bu yapabileceğini yaparken farklı işletim yıllardan farklı tarayıcı farklı yazı tipleri işlemek, çünkü gerçekten işe yaramaz.

O işi yaptım bile o da işlemek için sonsuza kadar sürer, çünkü, bunu yapmak istemem. Sizin sunucu yerine birkaç bin saniyede 1 sayfa (eğer) itmek mümkün olacaktır.

Eğer firar olmadan yaşayabilir ..., o zaman bu gibi div etiketleri ve css overflow: hidden güzel sahte kullanarak yapabilirsiniz:

.line_of_text {
    height:1.3em;
    line-height:1.3em;
    overflow:hidden;
}

<div class="line_of_text"> Some long text which will arbitrarily be cut off at whatever word fits best</div>

@ Robert

ne düşük bir z-index ile bir div elipsleri koyarsanız böylece onlar bir arka plan resmi veya bir şey tarafından örtbas olsun (kısa hatlar için) sola hareket alıyorsunuz?

ben biliyorum oldukça hacky, ama hey değer bir sağ deneyin?

edit Başka bir fikir: javascript ve doğru tüm yol itti değilse, bunu gizlemek ile elipsleri içeren div konumunu belirler?

PHP dolayı tamamen tiplerini ölçmek için tasarlanmış bir fonksiyon olsa bile, http://www.php.net/imageftbbox, ziyaretçinin bir küçük yazı tipi boyutu ayarı olup olmadığını bilmek için PHP için hiçbir yol olduğunu gerçeğine dikkate sol gerektiğini sizin beklenen yazı tipi boyutu daha büyüktür.

http://mattsnider.com/css/css-string-truncation-with-ellipsis/: Bu konuda bir makale

etiketler