ওভারফ্লো সিএসএস সম্পত্তি মান হিসাবে লুকানো সঙ্গে কাজ কিভাবে

Question

আমি একটি কঠিন সময় পার করছি overflow: hidden।

মূলত, আমি একটি অ-অর্ডারড তালিকার ওভারফ্লো লুকানোর চেষ্টা করছি যা একটিতে অবস্থিত <div>।

যদিও এটি কাজ করছে না আমার কোনও ধারণা নেই।

এটি লুকানোর পরিবর্তে এটি আমার তালিকাটিকে অনুভূমিক বিন্যাস থেকে উল্লম্ব বিন্যাসে ভেঙে দেয়।

আনর্ডারড তালিকা হ'ল ক্যারোসেল এবং ধারকটি তালিকা।

নীচে আমার সিএসএস কোড রয়েছে;

div.body .container .images {
    background: url(/images/images-background.jpg);
    height: 62px;
    margin-bottom: 17px;
    width: 384px;
}
div.body .container .images #images-previous {
    cursor: pointer;
    float: left;
}
div.body .container .images #images-next {
    cursor: pointer;
    float: left;
}
div.body .container .images .list {
    float: left;
    overflow: hidden;
    vertical-align: top;
    width: 336px;
}
div.body .container .images .carousel {
    margin-bottom: 6px;
    margin-top: 8px;
    width: 336px;
}

এখানে, আমার এইচটিএমএল;

<div class="images">
    <div id="images-previous">
        <img src="/images/images-previous.jpg" width="24" height="62" alt="Previous" />
    </div>
    <div class="list">
        <ul class="carousel">
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li> 
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>    
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <!--
            <cfset i=1>
                <cfloop condition="i lte images.recordcount">
                    <cfoutput>
                        <li>
                            <img src="#images.thumburl[i]#" width="44" height="44" alt="#images.alt[i]#" class="thumbnail" />
                            <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="#images.alt[i]#" class="over" />
                            <img src="/images/carousel-image-holder.png" width="49" height="48" alt="#images.alt[i]#" class="under" />
                        </li>
                    </cfoutput>
                    <cfset i=i+1>
                </cfloop>
            </cfset>
            -->
        </ul>
    </div>
    <div id="images-next">
        <img src="/images/images-next.jpg" width="24" height="62" alt="Next" />
    </div>
<div class="clear"></div>

Comments

.listনির্দিষ্ট উচ্চতা দেওয়ার বিরুদ্ধে কথা বলার কিছু আছে কি ? আমি মনে করি এটি তখন কাজ করবে।

— পেক্কা

@ পেক্কা, আমি এটি পরীক্ষা করে দেখব। ধরে নিই যে সিএসএসের বিধি প্রযোজ্য ( কারণ এখানে পোস্ট করা এইচটিএমএলগুলি div.bodyএবং .containerউপাদানগুলি প্রদর্শন করে না )

— গ্যাব্রিয়েল পেট্রিওলি

কাজ হয়নি। তালিকাটি আড়াল করার পরিবর্তে যদি ওভারফ্লো হয় তবে এটি তালিকাটি মোড়বে।

— ড্যারেন

আপনার <li>অনুভূমিক বিন্যাসটি কীভাবে পেল ? আপনি কি আমাদের কিছু সিএসএস দেখাতে মিস করেছেন? এটি ঠিক কী জন্য? একটি ইমেজ স্লাইডার?

— জামান

হাই বন্ধুরা, দেখা যাচ্ছে যে আমি কোনও অনুভূমিক মেনু ব্যবহার করতে পারি না কারণ পিতামাতার প্রস্থের কারণে ভাসমান বা ইনলাইন প্রদর্শন সর্বদা ছড়িয়ে যায়। আমি এখন একটি টেবিল চেষ্টা করছি তবে এটি পাশাপাশি ব্যথা হচ্ছে।

— ড্যারেন

Answer 1

ঠিক আছে যদি অন্য কারও সমস্যা হয় তবে এটি আপনার উত্তর হতে পারে:

আপনি যদি নিখুঁত অবস্থানযুক্ত উপাদানগুলি গোপন করার চেষ্টা করছেন তবে নিশ্চিত করুন যে সেই নিখুঁত অবস্থানযুক্ত উপাদানের ধারক তুলনামূলকভাবে অবস্থান করছে।

Comments

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

— ক্রিস

দুর্দান্ত - এটি বাদে মরোনিক। ওভারফ্লো: লুকানো উচিত। দস্তাবেজের কোনও অ্যাবস্ট্রাক্ট রেফারেন্স ছাড়াই যে কেউ এই রুটটিকে বনাম যে রাস্তাটি আরও অর্থবোধ করে তা বেছে নেওয়ার পক্ষে কোনও ভাল কারণ সরবরাহ করতে পারে?

— ব্যবহারকারী 1873073

প্রকৃতপক্ষে পিতামাতার উপাদানগুলিকে কেবল অবস্থান করা দরকার, যার অর্থ নিরঙ্কুশ এবং স্থির এছাড়াও বৈধ। মূলত এমন কিছু যা স্থির নয়।

— রায়ান জেনকিন্স

দুর্দান্ত উত্তর, আমার দৃশ্যের জন্যও কাজ করেছে। আমার ক্ষেত্রে ওভারফ্লো: ডিভের সাথে ডিভের একটি অবস্থান ছিল: আপেক্ষিক বৈশিষ্ট্য। একটি অবস্থান যুক্ত করা: এর পিতামাতার সাথে সম্পর্কিত এটি সমাধান করেছে।

— অনুরাগ

Answer 2

আসলে ...

একটি নিখুঁত অবস্থানযুক্ত উপাদানটি আড়াল করার জন্য ধারকটি positionঅবশ্যই ব্যতীত অন্য কিছু হতে পারে static। এটি হতে পারে relativeবা fixedছাড়াও absolute।

Comments

অন্য কারও কাছে যারা এখনও এই সমস্যার মুখোমুখি হতে পারে: staticযতদূর আমি বলতে পারি সন্তানের অবশ্যই মিত্র অবস্থানে থাকতে হবে । position:relativeপিতা বা মাতা এবং সন্তানের উভয়কেই সেট করা কাজ করে না।

— অ্যালভিন ওয়ান

Answer 3

সরবরাহিত উত্তর ছাড়াও:

এটা পিতা বা মাতা উপাদান (সঙ্গে এক মত মনে হয় overflow:hidden) না হতে display:inline। display:inline-blockআমার জন্য কাজ করতে পরিবর্তন ।

.outer {
  position: relative;
  border: 1px dotted black;
  padding: 5px;
  overflow: hidden;
}
.inner {
  position: absolute;
  left: 50%;
  margin-left: -20px;
  top: 70%;
  width: 40px;
  height: 80px;
  background: yellow;
}

<span class="outer">
  Some text
  <span class="inner"></span>
</span>
<span class="outer" style="display:inline-block;">
  Some text
  <span class="inner"></span>
</span>

Comments

দুঃখিত এটির কোনও অর্থ হয় না, আপনি কীভাবে ইনলাইন দিয়ে ওভারফ্লোটি পরিচালনা করবেন? ডকুমেন্টেশনটিও স্পষ্ট: ডেভেলপার.মোজিলা.আর.ইন-

— ইউএস

এটা নিশ্চিত করুন। নেতিবাচক অফসেট সহ স্থির সন্তানের উপাদান থাকার চেষ্টা করুন। আপনি এলআই এবং স্প্যানের মতো ডিফল্ট উপাদানগুলির মাধ্যমে ইনলাইন দিয়ে এইরকম ভুল করতে পারেন

— মিলিও onাকনোভিয়

@ তেমনিআফিফ এবং মিলো আকানভিভি .. এটি সঠিক, এটি inline-blockহবে বা অন্য যে কোনও প্রদর্শন যেমন ধরণের ব্লক , যদিও এই ক্ষেত্রে, যেখানে উপাদান overflow: hiddenরয়েছে float, এটি inlineউপাদানগুলির উপরও কাজ করে।

— Ason

আপনি যখন অবস্থানকে নিখুঁতভাবে যুক্ত করবেন তখন উপাদানটি একটি ব্লক উপাদান হয়ে যায় সুতরাং এখানে কোনও ইনলাইন জড়িত নেই

— তেমনী আফিফ

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

— তেমনী আফিফ

Answer 4

স্পষ্টতই, কখনও কখনও, উপাদানটি যে উপাদানটি শেষ না করা উচিত তার পিতামাতার প্রদর্শন বৈশিষ্ট্যগুলিও সেট করা উচিত , যেমন:overflow:hidden

<div style="overflow: hidden">
  <div style="overflow: hidden">some text that should not overflow<div>
</div>

কেন? আমার কোনও ধারণা নেই তবে এটি আমার পক্ষে কাজ করেছে। Https://medium.com/@crrollyson/overflow-hided-not-working-check-the-child-element-c33ac0c4f565 দেখুন (স্ট্যাকওভারফ্লোতে স্নিপিং উপেক্ষা করুন!)

Answer 5

এটি আমার পক্ষে কাজ করেছে

<div style="display: flex; position: absolute; width: 100%;">
  <div style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
  </div>
</div>

যোগ করার পদ্ধতি position:absoluteপিতা বা মাতা ধারক তা কাজ করেছেন।

পিএস: এই যে কেউ পাঠ্যকে ছিন্ন করেই সমাধানের সন্ধান করছে for

সম্পাদনা: এটি এই প্রশ্নের উত্তর হিসাবে বোঝানো হয়েছিল কিন্তু যেহেতু তারা সম্পর্কিত এবং এটি এই প্রশ্নে কাউকে সহায়তা করতে পারে আমি এটি মুছে ফেলার পরিবর্তে এটি এখানে রেখে দেব।