সিএসএসের সাহায্যে দীর্ঘ স্ট্রিংগুলি কাটা হচ্ছে: এখনও সম্ভব?

Question

প্লেইন এইচটিএমএল এবং সিএসএস সহ পাঠ্য কেটে দেওয়ার কোনও ভাল উপায় আছে, যাতে ডায়নামিক সামগ্রী স্থির-প্রস্থ এবং উচ্চতার বিন্যাসে ফিট করতে পারে?

আমি লজিকাল প্রস্থ (যেমন একটি অন্ধভাবে অনুমান করা অক্ষরের সংখ্যা) দ্বারা সার্ভারের পাশ কাটাচ্ছি , তবে যেহেতু 'ডাব্লু' একটি 'আই' এর চেয়ে প্রশস্ত, এবং আমার পুনরায় অনুমান করার প্রয়োজনও রয়েছে ( এবং টুইট করতে থাকুন) প্রতিটি নির্দিষ্ট প্রস্থের জন্য অক্ষরের সংখ্যা। আদর্শভাবে কাটাটি ব্রাউজারে ঘটবে, যা রেন্ডার পাঠ্যের দৈহিক প্রস্থকে জানে ।

আমি খুঁজে পেয়েছি যে আইইয়ের একটি text-overflow: ellipsisসম্পত্তি আছে যা আমি যা চাই ঠিক তা করে তবে ক্রস ব্রাউজার হওয়ার জন্য আমার এটি দরকার। এই সম্পত্তিটি (কিছুটা?) স্ট্যান্ডার্ড বলে মনে হচ্ছে তবে এটি ফায়ারফক্স দ্বারা সমর্থিত নয়। আমি এর ভিত্তিতে বিভিন্ন কাজের সন্ধান পেয়েছি overflow: hidden, তবে তারা হয় একটি উপবৃত্ত প্রদর্শন করে না (আমি চাই ব্যবহারকারীটি সামগ্রীটি কাটা হয়েছে তা জানতে চান) বা এটি সর্বদা প্রদর্শন করে (এমনকি সামগ্রীটি কাটা না হলেও)।

কারও কি কোনও স্থির বিন্যাসে ডায়নামিক পাঠ্য ফিটিং করার ভাল উপায় আছে, বা লজিক প্রস্থের দ্বারা সার্ভার-সাইড ট্রান্সকেশনটি এখনকার মতোই পাচ্ছি?

Comments

2014: একটি আপ-টু-ডেট উত্তর দেখুন স্ট্যাকওভারফ্লো.com

— অ্যাড্রিয়েন

সম্পর্কিত: মাল্টিলাইন পাঠ্যে এলিপসিস প্রয়োগ করা

— মাইকেল বেনজামিন

বিষয়বস্তু খুব বেশি বিস্তৃত হলে HTML ট্যাগে llোকানো এলিপিসিসের

— শেখ

Answer 1

হালনাগাদ: text-overflow: ellipsis এখন ফায়ারফক্স 7 হিসাবে সমর্থিত (27 শে সেপ্টেম্বর 2011 প্রকাশিত)। হ্যাঁ! আমার মূল উত্তরটি historicalতিহাসিক রেকর্ড হিসাবে অনুসরণ করে।

জাস্টিন ম্যাক্সওয়েলের ক্রস ব্রাউজার সিএসএস সলিউশন রয়েছে। এটি ফায়ারফক্সে পাঠ্যটি নির্বাচন না করার ক্ষেত্রে খারাপ দিক দিয়ে আসে। পরীক্ষা করে দেখুন ম্যাট Snider এর ব্লগ তার গেস্ট পোস্ট কিভাবে এই কাজ করে উপর সম্পূর্ণ বিবরণের জন্য।

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

সিএসএস

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

ellipsis.xml ফাইল সামগ্রী

<?xml version="1.0"?>
<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>

নোড সামগ্রী আপডেট করা হচ্ছে

ফায়ারফক্সে এমনভাবে কাজ করে এমন কোনও নোডের সামগ্রী আপডেট করার জন্য নিম্নলিখিতটি ব্যবহার করুন:

var replaceEllipsis(node, content) {
    node.innerHTML = content;
    // use your favorite framework to detect the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
};

এটি কীভাবে কাজ করে তার ব্যাখ্যার জন্য ম্যাট স্নাইডারের পোস্ট দেখুন ।

Comments

এটি দুর্দান্ত, এটি দেখানোর জন্য ধন্যবাদ! ছাঁটাইয়া ডিভে কী কী বিষয়বস্তু যেতে পারে তার অনির্বাচনযোগ্য পাঠ্য এবং বিধিনিষেধগুলি লজ্জাজনক, তবে সাধারণত এটি একটি ভাল সমাধানের মতো দেখায়।

— স্যাম স্টোকস

আমি যে সত্যিকারের হতাশাকে আঘাত করেছি তা হ'ল স্পেসগুলি & nbsp; হিসাবে রেন্ডার করা হয়েছে, সুতরাং ইন্ডেন্টেশন করা আসলেই সম্ভব নয় ... = /

— ম্যাচু

আমিও একই সমস্যা পেরিয়ে এসেছি। আমি বিশ্বাস করতে পারি না ফায়ারফক্স কোনও রূপে এটি সমর্থন করে না

— mcjabberz

এই দৃষ্টিভঙ্গি ওয়েবকিট এবং আইই 8 তে নির্বাচন নিয়ন্ত্রণের বিকল্প উপাদানগুলির জন্য কারও পক্ষে কাজ করে। ওয়েবকিট আমার জন্য কিছু করছে বলে মনে হচ্ছে না এবং আইই 8 কেবল উপবৃত্তি ছাড়াই এটিকে ক্লিপ করে।

— রজত

জন্য মাইক্রোসফট এর ডকুমেন্টেশন text-overflowসমর্থন না ইঙ্গিত দেয় optionউপাদান (দেখুন এতে প্রয়োগ হয় এ অধ্যায় msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx )।

— সাইমন লাইশকে

Answer 2

2014 মার্চ: সিএসএসের সাথে দীর্ঘ স্ট্রিংগুলি কাটা: ব্রাউজার সমর্থনে ফোকাস সহ একটি নতুন উত্তর

Http://jsbin.com/leyukama/1/ এ ডেমো (আমি জেসবিন ব্যবহার করি কারণ এটি আইই এর পুরানো সংস্করণ সমর্থন করে)।

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }
</style>

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span>

-Ms-টেক্সট-ওভারফ্লো সিএসএস সম্পত্তিটি প্রয়োজনীয় নয়: এটি পাঠ্য-ওভারফ্লো CSS CSS সম্পত্তিটির প্রতিশব্দ, তবে 6 থেকে 11 এর আইই এর সংস্করণগুলি ইতিমধ্যে পাঠ্য-ওভারফ্লো CSS CSS সম্পত্তি সমর্থন করে।

ওয়েব ব্রাউজারগুলির জন্য উইন্ডোজ ওএসে সফলভাবে (ব্রাউজারস্ট্যাক.কম) পরীক্ষা করা হয়েছে:

• আই 6 থেকে আই 11
• অপেরা 10.6, অপেরা 11.1, অপেরা 15.0, অপেরা 20.0
• ক্রোম 14, ক্রোম 20, ক্রোম 25
• সাফারি 4.0, সাফারি 5.0, সাফারি 5.1
• ফায়ারফক্স 7.0, ফায়ারফক্স 15

ফায়ারফক্স: সাইমন লিয়েস্কেকে নির্দেশ করা হয়েছে (অন্য উত্তরে), ফায়ারফক্স কেবল ফায়ারফক্স 7 এর পরে টেক্সট-ওভারফ্লো সিএসএস সম্পত্তি সমর্থন করে (২ 27 শে সেপ্টেম্বর ২০১১ প্রকাশিত)।

আমি ফায়ারফক্স 3.0 এবং ফায়ারফক্স 6.0 এ এই আচরণটি দ্বিগুণ পরীক্ষা করেছি (পাঠ্য-ওভারফ্লো সমর্থনযোগ্য নয়)।

ম্যাক ওএস ওয়েব ব্রাউজারে আরও কিছু পরীক্ষার প্রয়োজন হবে।

দ্রষ্টব্য: এলিসিস প্রয়োগ করা হলে আপনি মাউস হোভারে একটি টুলটিপ দেখাতে চাইতে পারেন, এটি জাভাস্ক্রিপ্টের মাধ্যমে করা যেতে পারে, এই প্রশ্নগুলি দেখুন: এইচটিএমএল পাঠ্য-ওভারফ্লো উপবৃত্ত সনাক্তকরণ এবং এইচটিএমএল - যখন উপবৃত্ত সক্রিয় হয় তখন আমি কীভাবে কেবল টুলটিপ প্রদর্শন করতে পারি?

সম্পদ:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility
• http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://stackoverflow.com/a/1101702/759452
• http://www.browsersupport.net/CSS/text-overflow
• http://caniuse.com/text-overflow
• http://msdn.microsoft.com/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

Comments

@ চিরাগপেটেল এই লাইভ ডেমোটি jsbin.com/leyukama/1

— অ্যাড্রিয়েন হোন

যে কারও আগ্রহী এফএফ 7 <আজকাল ফায়ারফক্স ব্যবহারকারীদের 0,05%

— টম টম

Answer 3

যদি আপনি একটি জাভাস্ক্রিপ্ট সমাধান সহ ঠিক থাকেন তবে ক্রস-ব্রাউজার ফ্যাশনে এটি করার জন্য একটি jQuery প্লাগ-ইন রয়েছে - দেখুন http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis- জন্য -firefox-মাধ্যমে-jQuery /

Comments

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

— স্যাম স্টোকস

না, দুঃখিত ... আমি বাস্তব জীবনে কোডটি ব্যবহার করি নি, ডেমো দিয়ে খেলেছি। ডেমোটি নেওয়া এবং এটি একই পৃষ্ঠায় একশ বার কাট-পেস্ট করা সহজ হবে।

— রিচিহিন্দল

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

— ম্যাথিয়াস

@ মাথিয়াস: আপনি কোডটি পরীক্ষা করার পরে সম্ভবত কোডটি আপডেট করা হয়েছে, তবে আমি কেবল ডেমোটি দেখেছি এবং এটি ভেরিয়েবল-প্রস্থের ফন্টের সাথে পুরোপুরি কাজ করে।

— রিচিহাইন্ডল

Answer 4

ঠিক আছে, ফায়ারফক্স 7 text-overflow: ellipsisপাশাপাশি প্রয়োগ করা হয়েছে text-overflow: "string"। চূড়ান্ত প্রকাশের পরিকল্পনা করা হয়েছে ২০১১-০৯-২০১। এর জন্য।

Answer 5

সমস্যার আরেকটি সমাধান সিএসএস বিধিগুলির নিম্নলিখিত সেট হতে পারে:

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

উপরের সিএসএসের একমাত্র ত্রুটিটি হ'ল এটি "..." জুড়ে দেবে নির্বিশেষে পাঠ্যটি কন্টেইনারটি প্রবাহিত হয় বা না। তবুও, আপনার যদি এমন একটি মামলা রয়েছে যেখানে আপনার কাছে বেশ কয়েকটি উপাদান রয়েছে এবং নিশ্চিত হন যে সামগ্রীটি উপচে পড়বে, এটি নিয়মের একটি সহজ সেট।

আমার দুই সেন্ট. জাস্টিন ম্যাক্সওয়েলের মূল কৌশলটিতে হ্যাটস

Comments

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

— অ্যান্টনি

@ অ্যান্টনি কেবল ছদ্ম উপাদানটির অবস্থান দিন: position: absolute; right: 0;(এবং position: relativeএটি কাজ করার জন্য আসল উপাদানটি ভুলে যাবেন না )। এটি পাঠ্যের সাথে ওভারল্যাপ হবে যদিও আপনি পটভূমির রঙও যুক্ত করতে পারেন।

— শেষ সন্তান