एक वेबपैड

द्वारा मुद्रित स्ट्रिंग की चौड़ाई निर्धारित करना मेरे (PHP) वेबएप में, मेरे पास मेरी साइट का एक हिस्सा है जो हाल की खोजों का इतिहास रखता है। सबसे हालिया प्रश्न एक साइड बॉक्स में दिखाए जाते हैं। यदि क्वेरी टेक्स्ट बहुत लंबा है, तो मैं इसे छोटा कर देता हूं और इलिप्स दिखाता हूं। उदाहरण: "मेरी बहुत लंबी क्वेरी है ..."एक वेबपैड

वर्तमान में, मैं कुछ निश्चित वर्णों के बाद छंटनी करता हूं। चूंकि फ़ॉन्ट मोनोटाइप नहीं है, इसलिए सभी की एक क्वेरी सभी डब्ल्यू की क्वेरी से अधिक संकीर्ण है। मैं उन्हें सभी को लंबवत से पहले एक ही चौड़ाई के बारे में करना चाहता हूं। क्या परिणामस्वरूप स्ट्रिंग की अनुमानित चौड़ाई प्राप्त करने का कोई तरीका है ताकि किसी भी स्ट्रिंग के लिए इलिप्सिस शुरुआत से पिक्सेल की समान संख्या में हो? क्या सीएसएस का कोई तरीका है? क्या PHP है? क्या जावास्क्रिप्ट द्वारा इसे बेहतर तरीके से संभाला जाएगा?

स्रोत

2008-08-29 Dinah

यहाँ एक और उस पर ले है और आप की जरूरत नहीं है इलिप्सिस के बिना जीना!

<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>

वहाँ, इस के साथ एक दोष है अगर टेक्स्ट इतना छोटा हो पूरी तरह से प्रदर्शित किया जा रहा है दीर्घवृत्त अभी भी रूप में अच्छी तरह से प्रदर्शित किया जाएगा।

[संपादित करें: 2009/06/26]

पावर सांकेतिक शब्दों में बदलनेवाला के सुझाव मैं इस एक छोटे से संशोधित किया है पर। वास्तव में केवल दो परिवर्तन हैं, doctype (नीचे नोट देखें) और DIV पर display: inline-block विशेषता के अतिरिक्त।

IE 8.0, ओपेरा 9, एफएफ 3 में देखा गया एक doctype IE के लिए आवश्यक है पाने के लिए: यहाँ क्या यह अब की तरह दिखता है ...

<!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>

नोट्स है सही ढंग से काम करने के लिए display: inline-block।

यदि .qrytxt डीवी का ओवरफ्लो एक लंबे शब्द पर होता है, तो एलिप्सिस और अंतिम दृश्यमान शब्द के बीच एक व्यापक अंतर होने वाला है। आप उदाहरण को देखकर और छोटी वृद्धि में अपनी ब्राउज़र चौड़ाई का आकार बदलकर इसे देख सकते हैं। तो फिर (यह शायद के रूप में अच्छी मूल उदाहरण में ही अस्तित्व में, मैं सिर्फ यह तो देखा हो सकता है नहीं)

, एक अपूर्ण सीएसएस-एकमात्र समाधान। जावास्क्रिप्ट एकमात्र चीज हो सकती है जो प्रभाव को सही साबित कर सकती है।

[संपादित करें: 2009/06/27]

यहाँ एक और विकल्प है जो ब्राउज़र विशिष्ट एक्सटेंशन का उपयोग करता है।

<!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>

ध्यान दें कि ऊपर के उदाहरण के लिए काम करने के लिए, आप एक्सएमएल -moz बाध्यकारी नियम, अंडाकार-xbl.xml द्वारा संदर्भित फ़ाइल बनाना होगा। यह निम्न एक्सएमएल शामिल करना चाहिए है:

<?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>

स्रोत

2008-08-29 03:43:14

मुझे यह जवाब पसंद है, हमें इसे छोटे टेक्स्ट के मुद्दे के लिए एक समाधान के साथ अद्यतन करने में देखना चाहिए। में देखता हूँ में क्या कर सकता हूँ। –

मैंने एक विकल्प जोड़ा है। अभी भी सही नहीं है :( –

यहां दो अतिरिक्त विचार हैं। सबसे पहले, इलिप्सिस के लिए, & hellip का उपयोग करें, "..." "..." जैसा नहीं है। दूसरा, सभी फ़्लोटिंग स्पैन क्यों शुरू हो सकते हैं? आप इसे दे सकते हैं जब आवश्यक हो तो ब्राउजर पूरी तरह से div में इलिप्सिस जोड़ता है (टेक्स्ट ओवरफ्लो निर्दिष्ट करके: आईई के लिए इलिप्सिस, -ओ-टेक्स्ट-ओवरफ्लो: ओपेरा के लिए इलिप्सिस और एफएफ के लिए -मोज़-बाइंडिंग वर्कअराउंड का उपयोग करके)। –

क्या सीएसएस का कोई तरीका है?

नहीं

करता पीएचपी?

नहीं

आप हर किरदार के लिए फ़ॉन्ट मीट्रिक प्राप्त, और उन्हें अपने स्ट्रिंग में अपने सभी पत्र में आवेदन करना होगा चाहते हैं कि ऐसा करने के लिए। जबकि आप सर्वर पर ImageMagick जैसे ड्रॉइंग/रेंडरिंग लाइब्रेरी का उपयोग करके ऐसा कर सकते हैं, यह वास्तव में काम नहीं करेगा क्योंकि विभिन्न ओएस के अलग-अलग ब्राउज़र अलग-अलग ब्राउज़र पर अलग-अलग ब्राउज़र हैं।

भले ही यह काम करता है, आप इसे नहीं करना चाहते हैं, क्योंकि यह हमेशा के लिए प्रस्तुत करने के लिए भी ले जाएगा। आपका सर्वर कई हज़ारों के बजाय प्रति पृष्ठ 1 पृष्ठ (यदि वह है) को धक्का दे पाएगा।

आप अनुगामी बिना रह सकते हैं ..., तो आप कर सकते हैं अच्छी तरह से नकली यह, div टैग और सीएसएस overflow: hidden का उपयोग कर इस तरह:

.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>

स्रोत

2008-08-29 03:05:07

@Robert

क्या अगर आप एक कम z-index इतना के साथ एक div में दीर्घवृत्त डाल कि जब यह (कम लाइनों के लिए) बाईं ओर ले जाता है वे कवर करने के पृष्ठभूमि छवि या कुछ द्वारा?

यह बहुत हैकी मुझे पता है, लेकिन क्या यह सही प्रयास करने लायक है?

संपादित करें एक और विचार: जावास्क्रिप्ट के साथ अंडाकार युक्त div की स्थिति निर्धारित करें और यदि इसे सही तरीके से धक्का नहीं दिया गया है, तो इसे छुपाएं?

स्रोत

2008-08-29 04:06:21 Jiaaro

तुम भी काफी आसानी से जावास्क्रिप्ट का एक सा इस्तेमाल कर सकते हैं:

document.getElementByID("qrytxt").offsetWidth;

आप पिक्सल में एक तत्व की चौड़ाई दे देंगे और यहां तक कि IE6 में काम करता है। यदि आप प्रत्येक क्वेरी के अंत में लंबवत युक्त स्पेल जोड़ते हैं तो सीएसएस मैनिपुलेशन के साथ जावास्क्रिप्ट में एक साधारण लॉजिकल टेस्ट का उपयोग उन्हें आवश्यकतानुसार छुपाने/दिखाने के लिए किया जा सकता है।

स्रोत

2008-09-04 10:47:09

PHP को इस तथ्य के कारण पूरी तरह से विचार से बाहर रखा जाना चाहिए कि भले ही फोंट को मापने के लिए डिज़ाइन किया गया कोई फ़ंक्शन है, http://www.php.net/imageftbbox, PHP के लिए यह जानने का कोई तरीका नहीं है कि विज़िटर के पास न्यूनतम फ़ॉन्ट आकार सेटअप बड़ा है या नहीं आपके अनुमानित फ़ॉन्ट आकार की तुलना में।

स्रोत

2009-06-26 06:33:12 joebert

उत्तर

संबंधित मुद्दे