পাঠ্য-ওভারফ্লো: ফায়ারফক্স 4 এর উপবৃত্ত? (এবং এফএফ 5)

Question

text-overflow:ellipsis;সিএসএস সম্পত্তি কিছু বিষয় যে মাইক্রোসফট ওয়েবের জন্য ডান করেছে এক হতে হবে।

ফায়ারফক্স বাদে অন্যান্য সমস্ত ব্রাউজার এখন এটি সমর্থন করে।

ফায়ারফক্স বিকাশকারীরা ২০০৫ সাল থেকে এটি নিয়ে তর্ক করে আসছেন তবে এর সুস্পষ্ট চাহিদা থাকা সত্ত্বেও তারা বাস্তবে এটি বাস্তবায়নের জন্য নিজেদের এনেছে বলে মনে হচ্ছে না (এমনকি পরীক্ষামূলক -moz-বাস্তবায়নও যথেষ্ট হবে)।

কয়েক বছর আগে, কেউ একটি উপবৃত্তিকে সমর্থন করার জন্য ফায়ারফক্স 3 হ্যাক করার উপায় নিয়ে কাজ করেছিলেন । হ্যাকটি -moz-bindingXUL ব্যবহার করে বৈশিষ্ট্যটি প্রয়োগ করে uses বেশ কয়েকটি সাইট এখন এই হ্যাক ব্যবহার করছে।

খারাপ খবর? ফায়ারফক্স 4 বৈশিষ্ট্যটি সরিয়ে দিচ্ছে-moz-binding যার অর্থ এই হ্যাকটি আর কাজ করবে না।

সুতরাং ফায়ারফক্স 4 প্রকাশের সাথে সাথেই (এই মাসের শেষের দিকে, আমি শুনছি), আমরা এই বৈশিষ্ট্যটিকে সমর্থন করতে সক্ষম না হওয়ায় সমস্যাটিতে ফিরে যাব।

সুতরাং আমার প্রশ্নটি: এর আশেপাশে অন্য কোনও উপায় আছে? (আমি যদি সম্ভব হয় তবে জাভাস্ক্রিপ্ট সমাধানে ফিরে যাওয়া এড়ানোর চেষ্টা করছি)

[সম্পাদনা]
প্রচুর পরিমাণে ভোট, সুতরাং আমি স্পষ্টতই একমাত্র যিনি জানতে চাইলাম না, তবে এ পর্যন্ত আমার একটি উত্তর পেয়েছে যা মূলত 'জাভাস্ক্রিপ্ট ব্যবহার করুন' বলে। আমি এখনও এমন একটি সমাধানের জন্য প্রত্যাশা করছি যা হয় জেএসের একেবারেই প্রয়োজন হবে না, বা সবচেয়ে খারাপভাবে এটি কেবল পতিত ব্যাক হিসাবে ব্যবহার করবে যেখানে সিএসএস বৈশিষ্ট্যটি কাজ করে না। সুতরাং আমি প্রশ্নটিতে একটি অনুগ্রহ পোস্ট করতে চলেছি, অফ সুযোগে যে কেউ, কোথাও একটি উত্তর খুঁজে পেয়েছে।

[সম্পাদনা]
একটি আপডেট: ফায়ারফক্স দ্রুত বিকাশ মোডে চলে গেছে, তবে এফএফ 5 এখন প্রকাশের পরেও এই বৈশিষ্ট্যটি এখনও সমর্থিত নয় supported এবং এখন যে সংখ্যাগরিষ্ঠ ব্যবহারকারীরা এফএফ 3.6 থেকে আপগ্রেড করেছেন, হ্যাকটি আর সমাধান নয় is সুসংবাদটি আমাকে বলা হয়েছে যে এটি ফায়ারফক্স to এ যুক্ত হতে পারে, যা নতুন প্রকাশের শিডিউলটি কয়েক মাসের মধ্যেই বেরিয়ে আসা উচিত। যদি এটি হয় তবে আমি অনুমান করি আমি এটি অপেক্ষা করতে পারি তবে এটি লজ্জাজনক যে তারা এটিকে তাড়াতাড়ি সাজাতে পারত না।

[শেষ সম্পাদনা]
আমি দেখতে পাচ্ছি অবশেষে ফায়ারফক্সের "অররা চ্যানেল" (অর্থাত্ বিকাশ সংস্করণ) এ এলিপসিস বৈশিষ্ট্য যুক্ত করা হয়েছে। এর অর্থ এটি এখন ফায়ারফক্স 7 এর অংশ হিসাবে প্রকাশ করা উচিত, যা ২০১১ সালের শেষের দিকে শেষ।

রিলিজ নোটগুলি এখানে উপলভ্য: https://developer.mozilla.org/en-US/Firefox/Relayss/7

Comments

মাইক্রোসফ্ট ওয়েবের জন্য অন্যান্য দুর্দান্ত কাজগুলি করেছে: এজেএক্স, ইনারএইচটিএমএল, যথাযথ বিশ্বস্ততার সাথে জাভাস্ক্রিপ্ট অনুলিপি করছে যে এপিআইগুলি ঠিক একই রকম নয়,

— আইআই

@ এসড্লেইহসিরহ্যাক: আইই ৫.৫ -> আই 6 ট্রানজিশন আসলে বিপ্লব ছিল। আমি যে কয়েক জন লোককে দেখেছি যে সেগুলি সর্বজনীনভাবে এটি স্বীকৃত; আপনি একজন।

— মিংগো

@ মেমোস হ্যাঁ, আমি বেশ খোলামেলা, ভাববাদী এবং তীক্ষ্ণ এবং বুদ্ধিমান।

— sdleihssirhc

@ মেমোস এবং @ এসড্লেইহসিরহিসি: পয়েন্টটি ভালভাবে তৈরি হয়েছে, এবং আমি সম্মত হই - আইআই 6 এর দিনটিতে ভাল ছিল। আইআই My এর সাথে আমার সমস্যাগুলি সেই সময়টি কতটা ভাল ছিল তা নয়, তবে ওয়েবে এটি কীভাবে 10 বছরের স্থবিরতা সৃষ্টি করেছিল। তবে এটিই ভাল বা মন্দ সম্পর্কে বিতর্ক করার জায়গা নয়। :-) এর জন্য প্রচুর অন্যান্য জায়গা রয়েছে। এরই মধ্যে, আমি ফায়ারফক্স বিকাশকারীদের সাথে উপবৃত্তির বিষয়ে অনড় থাকায় এখনও হতাশ।

— স্পুডলি

দুর্ভাগ্যক্রমে আপাতত কোনও সিএসএস সমাধান নেই। আমি যে ফ্যালব্যাক সলিউশনটি ব্যবহার করি, মডার্নিজারের কাছে এই সম্পত্তিটিরও পরীক্ষা নেই। ইউজারএজেন্ট ফায়ারফক্স কিনা তা পরীক্ষা করে দেখতে পারেন এবং CSS এর পরিবর্তে জাভাস্ক্রিপ্ট লোড করতে পারেন

— নুনোপলোনিয়া

Answer 1

স্পুদলি, আপনি jQuery ব্যবহার করে একটি ছোট জাভাস্ক্রিপ্ট লিখে একই জিনিস অর্জন করতে পারেন:

var limit = 50;
var ellipsis = "...";
if( $('#limitedWidthTextBox').val().length > limit) {
   // -4 to include the ellipsis size and also since it is an index
   var trimmedText = $('#limitedWidthTextBox').val().substring(0, limit - 4); 
   trimmedText += ellipsis;
   $('#limitedWidthTextBox').val(trimmedText);
}

আমি বুঝতে পারি যে এমন কোনও উপায় থাকা উচিত যা সমস্ত ব্রাউজারগুলি এটিকে স্থানীয়ভাবে (জাভাস্ক্রিপ্ট ব্যতীত) সমর্থন করে তবে আমাদের কাছে এই মুহুর্তটি রয়েছে।

সম্পাদনা এছাড়াও, আপনি এই cssসমস্ত নির্দিষ্ট প্রস্থের ক্ষেত্রের সাথে ক্লাস সংযুক্ত করে আরও নিখুঁত করে তুলতে পারেন fixWidth এবং তারপরে নীচের মতো কিছু করতে পারেন:

$(document).ready(function() {
   $('.fixWidth').each(function() {
      var limit = 50;
      var ellipsis = "...";
      var text = $(this).val();
      if (text.length > limit) {
         // -4 to include the ellipsis size and also since it is an index
         var trimmedText = text.substring(0, limit - 4); 
         trimmedText += ellipsis;
         $(this).val(trimmedText);
      }
   });
});//EOF

Comments

আমি আপনাকে +1 দিয়েছি তবে জাভাস্ক্রিপ্টের সমাধানটি গ্রহণ করতে আমি দ্বিধা বোধ করছি যদি না অন্য কিছু সম্ভব হয়। আমি অন্য কোনও উত্তর পাই কিনা তা দেখার জন্য আমি আরও কিছুক্ষণ অপেক্ষা করব। যদি জেএস একমাত্র বিকল্প হয়, তবে এটির সাথে ভাল অভিনয় করা ভাল হবে text-overflow:ellipsis;তাই আমি অন্য ব্রাউজারগুলিতে সিএসএস বিকল্পটি ব্যবহার করতে পারি।

— স্পুডলি

অন্য কোনও কার্যক্ষম সমাধানের অভাবে, আমাকে অনিচ্ছাকৃতভাবে এটি গ্রহণ করতে হবে। আমি এটিকে পরিবর্তন করব যাতে এটি কেবল ফায়ারফক্সে চলে তাই আমি অন্যান্য ব্রাউজারগুলিতে সিএসএস বৈশিষ্ট্যটি ব্যবহার করতে পারি। এখানে আশা করছি যে মজিলা ছেলেরা এফএফ 5 এর জন্য উপবৃত্তির প্রয়োগ করতে পারে। সাহায্যের জন্য ধন্যবাদ.

— স্পুদলি

না করা উচিত length()হবে length? এটি একটি সম্পত্তি।

— অ্যালেক্স

এমন একটি চরিত্রের দৈর্ঘ্য বাছাই করা শক্ত যা সর্বদা কাজ করে, বিশেষত যদি আপনি ভেরিয়েবল-প্রস্থের ফন্ট ব্যবহার করছেন বা ব্রাউজারে পাঠ্যের আকার বাড়া বা হ্রাস করেছেন।

— spb

Answer 2

সম্পাদনা 09/30/2011

এফএফ 7 চলে গেছে, এই বাগটি সমাধান হয়েছে এবং এটি কার্যকর হয়!

---

সম্পাদনা 08/29/2011

এই সমস্যাটিকে সমাধান হিসাবে চিহ্নিত করা হয়েছে এবং এফএফ 7 এ উপলব্ধ হবে; বর্তমানে 09/27/2011 এ প্রকাশের জন্য সেট করা হয়েছে।

আপনার ক্যালেন্ডারগুলি চিহ্নিত করুন এবং আপনি স্থাপন করা সমস্ত হ্যাকগুলি সরাতে প্রস্তুত হন।

পুরোনো

আমার আর একটি উত্তর আছে: অপেক্ষা করুন ।

এফএফ ডেভ টিম এই সমস্যাটি সমাধানের জন্য তীব্র তাগিদে রয়েছে।

ফায়ারফক্স 6 এর জন্য তাদের অস্থায়ী ফিক্স সেট রয়েছে।

ফায়ারফক্স 6 !! কখন বের হবে?!?

সহজ সেখানে, কল্পিত, অতি-প্রতিক্রিয়াশীল ব্যক্তি। ফায়ারফক্স দ্রুত ডে ট্র্যাকের উপর রয়েছে। ফায়ারফক্স 5 এর ছয় সপ্তাহ পরে এফএফ 6 মুক্তির জন্য প্রস্তুত রয়েছে ফায়ারফক্স 5 জুন 21, 2011-এ প্রকাশের জন্য সেট করা আছে।

সুতরাং এটি আগস্ট ২০১১ এর শুরুতে কিছুটা স্থির করে রাখে ... আশা করি।

মূল পোস্টারের প্রশ্নের লিঙ্কটি থেকে বাগটি অনুসরণ করে আপনি মেলিং তালিকার জন্য সাইন আপ করতে পারেন।

অথবা আপনি এখানে ক্লিক করতে পারেন ; যেটি সবচেয়ে সহজ।

Comments

এই hacks.mozilla.org/2011/07/aurora7 বোঝা এটা ফায়ারফক্স 7, না 6. কিন্তু আপনার প্রধান পয়েন্ট (থাকবে অপেক্ষার ) বৈধ পারেন উপায়।

— ম্যাট্রিক্সফ্রোগ

"অপেক্ষা করুন" একমাত্র বাস্তবসম্মত উত্তর বলে মনে হচ্ছে, তবে যখন আপনার বস এটির দাবি করছেন তখন এটি গ্রহণ করা একটি কঠিন উত্তর। :( চূড়ান্তভাবে অপেক্ষা শেষ পর্যন্ত শেষ হতে চলেছে মনে হচ্ছে (যদিও যতক্ষণ না লোকেরা ফায়ারফক্সের পুরানো সংস্করণ ব্যবহার করে লোকেরা থাকবে)

— স্পডলি

নাহ, এটি ফায়ারফক্স 7 এর জন্য সল্ট হবে : developer.mozilla.org/en/CSS/…

— খ্রিস্টান

Answer 3

আমার অবশ্যই বলতে হবে যে আমি একটু হতাশ হয়েছি যে আমার অ্যাপ্লিকেশনটিতে কেবলমাত্র ব্রাউজার নির্দিষ্ট হ্যাকটি এফএফ 4 সমর্থন করবে। উপরের জাভাস্ক্রিপ্ট সমাধান ভেরিয়েবল প্রস্থের ফন্টগুলির জন্য অ্যাকাউন্ট করে না। এটির জন্য অ্যাকাউন্ট হিসাবে একটি আরও ভার্বোজ স্ক্রিপ্ট এখানে। এই সমাধানটির সাথে বড় সমস্যাটি হ'ল কোডটি চালিত হওয়ার সাথে যদি পাঠ্যযুক্ত উপাদানটি লুকানো থাকে তবে বাক্সটির প্রস্থটি জানা যায় না। এটি আমার জন্য একটি চুক্তিভঙ্গকারী ছিল তাই আমি এটির উপর / পরীক্ষার কাজ বন্ধ করে দিয়েছিলাম ... তবে আমি ভেবেছিলাম এটি কারওর ব্যবহারের প্রয়োজন হলে আমি এটি এখানে পোস্ট করব। এটির পরীক্ষাটি নিশ্চিত করে নিন যেমন আমার পরীক্ষা নিরীক্ষণের চেয়ে কম ছিল। আমি কেবল এফএফ 4 এর জন্য কোড চালানোর জন্য ব্রাউজারের চেক যুক্ত করার এবং অন্য সমস্ত ব্রাউজারগুলিকে তাদের বিদ্যমান সমাধানটি ব্যবহার করার অনুমতি দিয়েছিলাম।

এটি এখানে ফিডিংয়ের জন্য পাওয়া উচিত: http://jsfiddle.net/kn9Qg/130/

এইচটিএমএল:

<div id="test">hello World</div>

সিএসএস:

#test {
    margin-top: 20px;
    width: 68px;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid green;
}

জাভাস্ক্রিপ্ট (jQuery ব্যবহার করে)

function ellipsify($c){
    // <div $c>                 content container (passed)
    //    <div $b>              bounds
    //       <div $o>           outer
    //          <span $i>       inner
    //       </div>
    //       <span $d></span>   dots
    //    </div>
    // </div>

    var $i = $('<span>' + $c.html() + '</span>');
    var $d = $('<span>...</span>');
    var $o = $('<div></div>');
    var $b = $('<div></div>');

    $b.css( {
        'white-space' : "nowrap",
        'display' : "block",
        'overflow': "hidden"
    }).attr('title', $c.html());

    $o.css({
        'overflow' : "hidden",
        'width' : "100%",
        'float' : "left"
    });

    $c.html('').append($b.append( $o.append($i)).append($d));

    function getWidth($w){
        return parseInt( $w.css('width').replace('px', '') );
    }

    if (getWidth($o) < getWidth($i))
    {
        while (getWidth($i) > (getWidth($b) - getWidth($d)) )
        {
             var content = $i.html();
             $i.html(content.substr(0, content.length - 1));
        }

        $o.css('width', (getWidth($b) - getWidth($d)) + 'px');
    }
    else
    {
        var content = $i.html();
        $c.empty().html(content);
    }
}

এটি বলা হবে:

$(function(){
    ellipsify($('#test'));
});

Answer 4

আমি গত সপ্তাহেও এই গ্রিমলিনে চলে এসেছি ।

যেহেতু গৃহীত সমাধানটি ভেরিয়েবল প্রস্থের ফন্টগুলির জন্য অ্যাকাউন্ট করে না এবং wwwhack এর সমাধানটিতে একটি লুপ রয়েছে তাই আমি আমার 0 .02 এ ফেলে দেব।

আমি ক্রস-গুণটি ব্যবহার করে আমার সমস্যার প্রসেসিংয়ের সময়কে দ্রুত হ্রাস করতে সক্ষম হয়েছি। মূলত, আমাদের কাছে এমন একটি সূত্র রয়েছে যা দেখে মনে হয়:

পরিবর্তনশীল এক্সএই ক্ষেত্রে হ'ল আমাদের কী সমাধান করতে হবে। যখন পূর্ণসংখ্যা হিসাবে ফিরে আসে, এটি ওভার-প্রবাহিত পাঠ্যটি হওয়া উচিত নতুন দৈর্ঘ্য। উপবৃত্তগুলিকে দেখানোর জন্য যথেষ্ট ঘর দেওয়ার জন্য আমি ম্যাক্সেলেন্থকে ৮০% দিয়ে গুন করেছি।

এখানে একটি সম্পূর্ণ এইচটিএমএল উদাহরণ রয়েছে:

<html>
    <head>
        <!-- CSS setting the width of the DIV elements for the table columns.  Assume that these widths could change.  -->
        <style type="text/css">
            .div1 { overflow: hidden; white-space: nowrap; width: 80px; }
            .div2 { overflow: hidden; white-space: nowrap; width: 150px; }
            .div3 { overflow: hidden; white-space: nowrap; width: 70px; }
        </style>
        <!-- Make a call to Google jQuery to run the javascript below.  
             NOTE:  jQuery is NOT necessary for the ellipses javascript to work; including jQuery to make this example work -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {  
                //Loop through each DIV element
                $('div').each(function(index) {
                    var myDiv = this;  //The original Div element which will have a nodeType of 1 (e.g. ELEMENT_NODE)
                    var divText = myDiv; //Variable used to obtain the text from the DIV element above  

                    //Get the nodeType of 3 (e.g. TEXT_NODE) from the DIV element.  For this example, it will always be the firstChild  
                    divText = divText.firstChild;  

                    //Create another variable to hold the display text  
                    var sDisplayText = divText.nodeValue;  

                    //Determine if the DIV element is longer than it's supposed to be.
                    if (myDiv.scrollWidth > myDiv.offsetWidth) {  
                        //Percentage Factor is just a way of determining how much text should be removed to append the ellipses  
                        //With variable width fonts, there's no magic number, but 80%, should give you enough room
                        var percentageFactor = .8;  

                        //This is where the magic happens.
                        var sliceFactor = ((myDiv.offsetWidth * percentageFactor) * sDisplayText.length) / myDiv.scrollWidth;
                        sliceFactor = parseInt(sliceFactor);  //Get the value as an Integer
                        sDisplayText = sDisplayText.slice(0, sliceFactor) + "..."; //Append the ellipses
                        divText.nodeValue = sDisplayText; //Set the nodeValue of the Display Text
                    }
                });
            });
        </script>
    </head>
    <body>
        <table border="0">
            <tr>    
                <td><div class="div1">Short Value</div></td>    
                <td><div class="div2">The quick brown fox jumps over the lazy dog; lots and lots of times</div></td>    
                <td><div class="div3">Prince</div></td> 
            </tr>
            <tr>    
                <td><div class="div1">Longer Value</div></td>   
                <td><div class="div2">For score and seven year ago</div></td>   
                <td><div class="div3">Brown, James</div></td>   
            </tr>
            <tr>    
                <td><div class="div1">Even Long Td and Div Value</div></td> 
                <td><div class="div2">Once upon a time</div></td>   
                <td><div class="div3">Schwarzenegger, Arnold</div></td> 
            </tr>
        </table>
    </body>
</html>

আমি বুঝতে পেরেছি এটি জেএসের একমাত্র ফিক্স, তবে মোজিলা ত্রুটিটি ঠিক না করা পর্যন্ত আমি সিএসএস সমাধান নিয়ে আসতে যথেষ্ট স্মার্ট নই।

এই উদাহরণটি আমার পক্ষে সবচেয়ে ভাল কাজ করে কারণ আমাদের অ্যাপ্লিকেশনটিতে জেএস প্রতিবার গ্রিড লোড হয়। প্রতিটি গ্রিডের কলামের প্রস্থ পরিবর্তিত হয় এবং আমাদের ফায়ারফক্স ব্যবহারকারীরা আমাদের অ্যাপটি কী ধরণের কম্পিউটারে দেখেন তার উপর আমাদের কোনও নিয়ন্ত্রণ নেই (অবশ্যই, আমাদের সেই নিয়ন্ত্রণটি রাখা উচিত নয় ))।

Comments

উত্তর করার জন্য ধন্যবাদ; আমি এটি দিয়ে চেষ্টা করব এবং আমি নিশ্চিত যে এটি একই সমস্যাটি সমাধান করার জন্য অন্যদের পক্ষে উপকারী হবে। +1

— স্পুডলি

হুম, আপনি আপনার পাঠ্য সম্পাদককে ভুল কনফিগার করেছেন বলে মনে হচ্ছে ;- পি - আপনি 8 টি অক্ষরের চেয়ে কম ট্যাব ব্যবহার করছেন বলে মনে হচ্ছে!

— স্যামবি

Answer 5

এই খাঁটি সিএসএস সমাধানটি প্রতিটি লাইনের পরে উপবৃত্তির উপস্থিতির কারণ ব্যতীত সত্যই নিকটে।

Comments

উত্তর করার জন্য ধন্যবাদ. আমি যতটা খাঁটি সিএসএস সমাধান গ্রহণ করতে চাই, এটি আমার পক্ষে পুনরায় কল্পনাযোগ্য নয়, কারণ এটির জন্য অতিরিক্ত মার্কআপ প্রয়োজন এবং আপনি যেমন বলেছিলেন, এটি না চাইলে উপবৃত্তগুলি প্রদর্শন করে। ধন্যবাদ যদিও. তবুও আপনাকে +1 দিয়েছি।

— স্পডলি