দুটি লাইনে ওভারফ্লো উপবৃত্ত পাঠ করুন

Question

আমি জানি যে আপনি উপচে পড়ার সময় (পিতামাতার সীমানা থেকে বেরিয়ে আসার) সময় এলিপিসিস (...) দিয়ে পাঠ শেষ করতে আপনি সিএসএস বিধিগুলির সংমিশ্রণটি ব্যবহার করতে পারেন।

একই প্রভাব অর্জন করা কি সম্ভব (কেবল নির্দ্বিধায় বলতে চাই না) একই প্রভাব অর্জন করা, তবে পাঠ্যটিকে একাধিক লাইনে মোড়ানো দেওয়া উচিত?

এখানে একটি ডেমো রয়েছে ।

div {
  width: 300px; 
  height: 42px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

আপনি দেখতে পাচ্ছেন, ডিভের প্রস্থের চেয়ে প্রশস্ত হয়ে গেলে পাঠটি উপবৃত্তির সাথে শেষ হয়। তবে, পাঠ্যটি দ্বিতীয় লাইনে মোড়ানো এবং চালিয়ে যাওয়ার জন্য এখনও যথেষ্ট জায়গা রয়েছে। এটি দ্বারা বাধাগ্রস্ত হয় white-space: nowrap, যা উপবৃত্তির কাজ করার জন্য প্রয়োজন।

কোন ধারনা?

পিএস: জেএস সমাধান নেই, সম্ভব হলে খাঁটি সিএসএস।

Comments

"স্থান আছে" কি নির্ধারণ করে? ফন্টের উচ্চতা সহ সেট সেট পিক্সেলগুলিতে কি? যদি কোনও শেষ ব্যবহারকারী তাদের ব্রাউজারে ফন্টের আকার বাড়িয়ে দেয় তবে কী হবে?

— জোয়েল ইথারটন

সদৃশ স্ট্যাকওভারফ্লো.com

— টম

@ জোয়েলথের্টন আমি মনে করি ব্রাউজারটি সিদ্ধান্ত নেবে এবং হ্যাঁ, সবকিছু আমার ক্ষেত্রে পিক্সেলে রয়েছে।

— টনি বোগদানভ

এটি একটি ভাল সমাধান হতে পারে: stackoverflow.com/questions/6222616/…

— আইভী

এটি হ্যাকিংসুই

— ফ্রন্ট-

Answer 1

আমি নিশ্চিত আপনি দেখা যদি নই এই , কিন্তু ক্রিস Coyier এর চমৎকার CSS-Tricks.com এই একটি যখন ফিরে একটি লিঙ্ক পোস্ট এবং এটি একটি বিশুদ্ধ সিএসএস সমাধান ঠিক কি আপনি চাইতে accomplishes আছে।

(কোডপেনে দেখার জন্য ক্লিক করুন)

এইচটিএমএল:

<div class="ellipsis">
    <div>
        <p>
            Call me Ishmael. Some years ago – never mind how long precisely – having
            little or no money in my purse, and nothing particular to interest me on
            shore, I thought I would sail about a little and see the watery part of the
            world. It is a way I have of driving off the spleen, and regulating the
            circulation. Whenever I find myself growing grim about the mouth; whenever it
            is a damp, drizzly November in my soul; whenever I find myself involuntarily
            pausing before coffin warehouses, and bringing up the rear of every funeral I
            meet; and especially whenever my hypos get such an upper hand of me, that it
            requires a strong moral principle to prevent me from deliberately stepping
            into the street, and methodically knocking people's hats off – then, I account
            it high time to get to sea as soon as I can.
        </p>
    </div>
</div>

সিএসএস:

html,body,p {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.ellipsis {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA;
}
.ellipsis:before {
    content: "";
    float: left;
    width: 5px;
    height: 200px;
}
.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px;
}
.ellipsis:after {
    content: "\02026";
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    float: right;
    position: relative;
    top: -25px;
    left: 100%;
    width: 3em;
    margin-left: -3em;
    padding-right: 5px;
    text-align: right;
    background-size: 100% 100%;/* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
    �background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
    background: -webkit-gradient(linear,left top,right top,
        from(rgba(255,255,255,0)),to(white),color-stop(50%,white));
        background: -moz-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
        background: -o-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
        background: -ms-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
        background: linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
    }

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

একটি যুক্ত বোনাস হিসাবে, সম্পূর্ণ প্রক্রিয়াটির একটি ডাউনলোডযোগ্য জিপ ফাইল রয়েছে (যদি আপনি এটি এবং সমস্তটি বুঝতে চান), তবে একটি SASS মিক্সিন ফাইলও যাতে আপনি এটিকে আপনার প্রক্রিয়াতে সহজেই ভাঁজতে পারেন।

আশাকরি এটা সাহায্য করবে!

http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

Comments

আমি কেবলমাত্র একটি অ্যান্ড্রয়েড ফোনে আপনার কোডপেন লিঙ্কটিতে ক্লিক করেছি এবং এটি ফায়ারফক্সে কাজ করেছে। এটি কোন প্ল্যাটফর্ম / ব্রাউজারে কাজ করছে না?

— দশরদ

uploady.com/#!/download/kAwBXv1CqXg/PU68wrP6QzGgydlS আমি ক্রোম ব্যবহার করছি এবং পূর্বরূপে কোনও উপবৃত্ত নেই। পাঠ্যের লাইন যুক্ত করা চালিয়ে যান, কিছুই হয় না। কয়টি লাইনের পরে এটি উপবৃত্ত প্রদর্শিত শুরু করবে?

— কোডিং_আইডিওট

আপনার পোস্ট করা আপলোড লিঙ্কে, পাঠ্যটি স্পষ্টতই এখনও ধারকটি উপচে পড়েনি। উপবৃত্তগুলি প্রদর্শিত হওয়ার আগে নির্দিষ্ট পাত্রে প্রদর্শনের জন্য পাঠ্যটি অনেক বেশি হতে হবে। প্রভাবটি দেখতে কেবল পাঠ্য যুক্ত করা চালিয়ে যান।

— দশরদ

@ মার্কোসপ্রেজ গুড - আমাকে অবাক করে না। এর সাথে ইঙ্গিত করা হয়েছে >> "অবশ্যই, একটি খাঁটি সিএসএস সমাধান হওয়ার অর্থ এটিও একটি বেশ জটিল ..." <<

— ড্যাশার্ড

Answer 2

সহজ সিএসএসের বৈশিষ্ট্যগুলি কৌশলটি করতে পারে। নিম্নলিখিতটি তিন লাইনের উপবৃত্তের জন্য।

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

Comments

এটি ফায়ারফক্সে কাজ করে না। কেবল ক্রোম, সাফারি এবং অপেরা

— যেকোনও

ক্যানিউজ অনুসারে , এটি বলে যে "অন্যান্য ব্রাউজারগুলি সম্পত্তি যেমনটি সমর্থন করবে তেমন সম্ভাবনা নেই"। তাই মাথা আপ।

— মতান ববি

স্মুথ ডুড .. খুব সহায়ক

— ভ্যালেন্টিনো পেরেইরা

— ফায়ার ফক্সে জিআর

: এখন মহান সমর্থন হয়েছে বলে মনে হয় caniuse.com/#search=line-clamp

— জোয়াও

Answer 3

এই খাঁটি সিএসএস সংস্করণটি একবার দেখুন: http://codepen.io/martinwolf/pen/qlFdp

display: -webkit-box;
max-width: 400px;
height: 109.2px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.625;

Comments

এটি সত্যিই দুর্দান্ত, খুব খারাপ এটি কেবল ওয়েবকিট। বিষয়টি সম্পর্কে একটি আকর্ষণীয় নিবন্ধটি এখানে দেওয়া হয়েছে: css-tricks.com/line-clampin

— টনি বোগদানভ

কেন আপনি দুটি text-overflowএবং displayবিধি ঘোষণা করবেন ?

— j08691

একটি বড় WoooW। আইভ লাইন-ক্ল্যাম্পের আগে কখনও দেখেনি

— মাইক অ্যারন

শুধু এফওয়াইআই, এটি আজকাল ফায়ারফক্সেও ঠিক কাজ করে। দুর্দান্ত সমাধান!

— অ্যাথক্সক্স

কেবলমাত্র 1 টি প্রশ্ন, যখন আমার পাঠ্যকালের একটি লাইন বা দুটি লাইন থাকে আমি তাদের কেন্দ্রিকভাবে চাই, আমি কীভাবে এটি করব, যদি আমি ডিসপ্লে ফ্লেক্স যুক্ত করি তবে আমি উপবৃত্ত হারাতে পারি, তবে কেবল ডিসপ্লে প্রদর্শিত হলে এই কাজটি মনে হয়:

— -উইবকিট

Answer 4

নীচে CSS এর কৌশলটি করা উচিত।

দ্বিতীয় লাইনের পরে, পাঠ্যটিতে ...

line-height: 1em;
max-height: 2em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

Comments

এটি দুর্দান্তভাবে কাজ করেছে তবে আমাকে যুক্ত করতে হয়েছিলoverflow:hidden

— টিমহিসনিউ

Answer 5

উপরের কাজ না করে থাকলে এটি ব্যবহার করুন

 display: block;
 display: -webkit-box;
 max-width: 100%;
 margin: 0 auto;
 -webkit-line-clamp: 2;
 /* autoprefixer: off */
 -webkit-box-orient: vertical;
 /* autoprefixer: on */
 overflow: hidden;
 text-overflow: ellipsis;

Answer 6

আমার দ্রষ্টব্যটিতে amcdnl এর একটি পুনরায় ব্যবহার করা হয়েছে তবে আমার ফ্যালব্যাকটি পাঠ্যের ধারকটির জন্য উচ্চতা ব্যবহার করে:

.my-caption h4 {
    display: -webkit-box;
    margin: 0 auto;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    height: 40px;/* Fallback for non-webkit */
}

Comments

-webkit-line-clampআইই ১১, এজ বা ফায়ারফক্সের জন্য কাজ করে না।

— গাʀʀʏ

@ গ্যারি, আপনি ঠিক বলেছেন, সেই সময় আপনার জেএস ফিক্স দরকার হত, তবে এটি এখন ঠিকঠাক কাজ করে। caniuse.com/#search=webkit-line-clamp

— ভিনসেন্টপেরিন.কম

Answer 7

স্ট্যাকওয়েফ্লোতে যে উত্তরের আমি দেখেছি তার ভিত্তিতে আমি এই কম মিশ্রণটি তৈরি করেছি (সিএসএস কোড উত্পন্ন করতে এই লিঙ্কটি ব্যবহার করুন ):

.max-lines(@lines: 3; @line-height: 1.2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lines;
  line-height: @line-height;
  max-height: @line-height * @lines;
}

ব্যবহার

.example-1 {
    .max-lines();
}

.example-2 {
    .max-lines(3);
}

.example-3 {
    .max-lines(3, 1.5);
}

Answer 8

এটি দুটি শ্রেণীর সংমিশ্রণে আরও মার্জিত বলে মনে হচ্ছে। two-linesযদি কেবল একটি সারি দেখতে হয় তবে আপনি ক্লাসটি ফেলে দিতে পারেন:

.ellipse {
          white-space: nowrap;
          display:inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
       }
      .two-lines {
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          white-space: normal;
      }
      .width{
          width:100px;
          border:1px solid hotpink;
      }

        <span class='width ellipse'>
          some texts some texts some texts some texts some texts some texts some texts
       </span>

       <span class='width ellipse two-lines'>
          some texts some texts some texts some texts some texts some texts some texts
       </span>

Answer 9

কয়েকটি লাইনে সীমাবদ্ধতা প্রায় সমস্ত ব্রাউজারে কাজ করবে, তবে ফায়ারফক্স এবং আইইয়েতে একটি উপবৃত্ত (3 ডট) প্রদর্শিত হবে না। ডেমো - http://jsfiddle.net/ahzo4b91/1/

div {
width: 300px;
height: 2.8em;
line-height: 1.4em;
display: flex;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden; 
}

Answer 10

          text-overflow: ellipsis;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          line-height: 36px;
          max-height: 18px;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;

আমি লাইন-ক্ল্যাম্প এবং লাইন-উচ্চতা উভয় কাজের একটি কম্বো পেয়েছি: ডি

Answer 11

আমার কৌণিক অ্যাপ্লিকেশনটিতে নিম্নলিখিত লাইনের মাধ্যমে দ্বিতীয় লাইনের পাঠের ওভারফ্লোতে উপবৃত্ত অর্জন করতে আমার পক্ষে কাজ করেছে :

 <div style="height:45px; overflow: hidden; position: relative;">
     <span class=" block h6 font-semibold clear" style="overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; 
        line-height: 20px; /* fallback */
        max-height: 40px; /* fallback */
        -webkit-line-clamp: 2; /* number of lines to show */
        -webkit-box-orient: vertical;">
        {{ event?.name}} </span>
 </div>

আশা করি এটি কাউকে সাহায্য করবে।

Answer 12

যারা স্কেসে কাজ করছেন তাদের জন্য আপনাকে !autoprefixerমন্তব্যটির শুরুতে যুক্ত করতে হবে যাতে এটি পোস্টকএসের জন্য সংরক্ষিত থাকে:

আমি এই সমস্যার মুখোমুখি হয়েছি তাই এখানে এটি পোস্ট করা

line-height: 1em;
max-height: 2em;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

উল্লেখ

Answer 13

আপনি উপবৃত্ত, খাঁটি সিএসএসের পরিবর্তে দ্রবীভূত প্রভাব ব্যবহার করতে পারেন এবং আরও পেশাদার দেখায়:

    <div style="width: 293px; height:48px; overflow: hidden; ">
        More than two line of text goes here-More than two line of text goes here
    </div>
    <div style="position: relative; top: -24px; width: 293px; height:24px; 
             background: linear-gradient(90deg, rgba(255,0,0,0) 40%, rgba(255,255,255,1) 99%);">
    </div>

এখানে আমি ধরে নিয়েছি আপনার পটভূমির রঙ সাদা is

Answer 14

এটি মোট হ্যাক, তবে এটি কাজ করে:

http://jsfiddle.net/2wPNg/

div {
    width: 30%;
    float: left;
    margin-right: 2%;
    height: 94px;
    overflow: hidden;
    position: relative;
}

div:after {
     display: block;
      content: '...';
      width: 1em;
  height: 1.5em;
  background: #fff;
  position: absolute;
  bottom: -6px;
  right: 0;
    }

এটিতে সমস্যা আছে .... এটি একটি চিঠিটি বিশ্রীভাবে কাটাতে পারে এবং এটির কোনও প্রতিক্রিয়াশীল সাইটটিতে সম্ভবত কিছু অদ্ভুত ফলাফল হবে।

Comments

এটি সঠিক সমাধান করবে না কারণ যদি বিষয়বস্তু ছোট হয় তবে শেষ পর্যন্ত এটি '...' যুক্ত করে। ফিডল: jsfiddle.net/2wPNg

— শচীন

Answer 15

JQuery ব্যবহার করে উপবৃত্তগুলি পরিচালনা করার জন্য এখানে একটি সহজ স্ক্রিপ্ট। এটি উপাদানটির আসল উচ্চতা পরীক্ষা করে এবং এটি একটি লুকানো মূল নোড এবং একটি কাটা নোড তৈরি করে। যখন ব্যবহারকারী ক্লিক করেন তখন এটি দুটি সংস্করণের মধ্যে স্যুইচ করে।

একটি দুর্দান্ত সুবিধা হ'ল "উপবৃত্ত" শেষ শব্দের কাছাকাছি, আশানুরূপ।

আপনি যদি খাঁটি সিএসএস সমাধান ব্যবহার করেন তবে তিনটি বিন্দু শেষ শব্দটি থেকে দূরে উপস্থিত হবে appears

function manageShortMessages() {

        $('.myLongVerticalText').each(function () {
            if ($(this)[0].scrollHeight > $(this)[0].clientHeight)
                $(this).addClass('ellipsis short');
        });

        $('.myLongVerticalText.ellipsis').each(function () {
            var original = $(this).clone().addClass('original notruncation').removeClass('short').hide();
            $(this).after(original);

            //debugger;
            var shortText = '';
            shortText = $(this).html().trim().substring(0, 60) + '...';
            $(this).html(shortText);
        });
        
        $('.myLongVerticalText.ellipsis').click(function () {
            $(this).hide();

            if ($(this).hasClass('original'))
            {
                $(this).parent().find('.short').show();
            }
            else
            {
                $(this).parent().find('.original').show();
            }
        });
    }
	
  manageShortMessages();

div {
 border:1px solid red;
 margin:10px;
}

div.myLongVerticalText {
  height:30px;
  width:450px;
}

div.myLongVerticalText.ellipsis {
 cursor:pointer;
}

div.myLongVerticalText.original {
  display:inline-block;
  height:inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="myLongVerticalText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet quam hendrerit, sagittis augue vel, placerat erat. Aliquam varius porta posuere. Aliquam erat volutpat. Phasellus ullamcorper malesuada bibendum. Etiam fringilla, massa vitae pulvinar vehicula, augue orci mollis lorem, laoreet viverra massa eros id est. Phasellus suscipit pulvinar consectetur. Proin dignissim egestas erat at feugiat. Aenean eu consectetur erat. Nullam condimentum turpis eu tristique malesuada.

Aenean sagittis ex sagittis ullamcorper auctor. Sed varius commodo dui, nec consectetur ante condimentum et. Donec nec blandit mi, vitae blandit elit. Phasellus efficitur ornare est facilisis commodo. Donec convallis nunc sed mauris vehicula, non faucibus neque vehicula. Donec scelerisque luctus dui eu commodo. Integer eu quam sit amet dui tincidunt pharetra eu ac quam. Quisque tempus pellentesque hendrerit. Sed orci quam, posuere eu feugiat at, congue sed felis. In ut lectus gravida, volutpat urna vitae, cursus justo. Nam suscipit est ac accumsan consectetur. Donec rhoncus placerat metus, ut elementum massa facilisis eget. Donec at arcu ac magna viverra tincidunt.
</div>


<div class="myLongVerticalText">
One Line Lorem ipsum dolor sit amet.  
</div>
</body>

Comments

আপনি যদি এই সমাধানটিকে নিম্নচাপ দেন তবে দয়া করে এখানে কেন তা ব্যাখ্যা করুন, আমি এটির প্রশংসা করব।

— মাত্তেও কন্টা

ওপি CSS সমাধানের জন্য জিজ্ঞাসা করেছে এবং আপনি jQuery অফার করেছেন?

— ড্যাশার্ড

আমি মিস করেছি যে এটি জাভাস্ক্রিপ্টের অনুপস্থিতির একটি দৃ requirement় প্রয়োজন ছিল, আমার ক্ষেত্রে খাঁটি সিএসএস সমাধান রেন্ডারিংয়ের সমস্যাগুলি উপস্থাপন করেছে, jQuery সমাধান আমাকে চূড়ান্ত উপস্থাপনা এবং উপবৃত্ত অবস্থানের উপর আরও নিয়ন্ত্রণ দিয়েছে।

— মাত্তেও কন্টা

সম্পূর্ণভাবে একমত. আমার উত্তরে আমি উল্লেখ করেছি যে জেএস এর সাথে অর্জন করা অসীম সহজ ছিল।

— দশার্ড

Answer 16

আপনার টার্গেটটি কী তা নিশ্চিত নন তবে আপনি কি পাঠ্যটি দ্বিতীয় লাইনে আসতে চান?

আপনার জেএসফিডালটি এখানে: http://jsfiddle.net/8kvWX/4/ সবেমাত্র নিম্নলিখিতটি সরিয়ে ফেলেছে:

     white-space:nowrap;  

আপনারা যা খুঁজছেন তা কি এটি নিশ্চিত তা নিশ্চিত না।

শুভেচ্ছা সহ,

মি

Comments

তিনি দ্বিতীয় লাইনের শেষে উপবৃত্ত চান, যা জাভাস্ক্রিপ্ট ছাড়া করা সহজ নয় ...

— মার্ক অডিট

@ মার্ক অউডেট হুবহু :)

— টনি বোগদানভ

ঠিক আছে, আমি যেমন খুঁজে পেয়েছি যে অন্য একজন ব্যক্তি দ্বিতীয় লাইনে লাইন রাখতে চেয়েছিল এবং তার সিএসএসটি আপনার মতই একই তবে ক্লাসটি পরিবর্তে একটি উল ট্যাগকে নির্দেশ করছে। যাইহোক, দুঃখিত টনি। আমি এটি আবার দেখুন এবং আমি সফল হলে আমার উত্তর আপডেট করব।

— মে

ভাল আমি মনে করি যে @ ইটাল গাল এর সেরা সমাধানটি। যতদূর আমি দেখেছি যে একজন কাজ করছে।

— মে