ডান পরিবর্তে বাম দিকে উপচে পড়া

Question 1

আমার সাথে একটি ডিভ রয়েছে overflow:hidden, যার মধ্যে আমি কোনও ফোন নম্বর দেখাই যা ব্যবহারকারী এটি টাইপ করেন। ডিভের ভিতরে থাকা পাঠ্যটি ডানে সারিবদ্ধ করা হয়েছে এবং আগত অক্ষরগুলি ডানদিকে যুক্ত করা হবে কারণ পাঠ্যটি বাম দিকে বড় হয়।

তবে একবার পাঠ্যটি ডিভের সাথে মানানসই না করার পরে, সংখ্যার শেষ অক্ষরগুলি স্বয়ংক্রিয়ভাবে ক্রপ হয়ে যায় এবং ব্যবহারকারী তার নতুন অক্ষরগুলি দেখতে পাবে না।

আমি যা করতে চাই বাম অক্ষরগুলি ক্রপ করা, যেমন ডিভটি তার সামগ্রীর ডানদিক দেখায় এবং বাম দিকে উপচে পড়ে over আমি এই প্রভাবটি কীভাবে তৈরি করতে পারি?

বাম দিকে উপচে পড়া ফোন নম্বর

Question 2

আপনি কি নিম্নলিখিতটি ব্যবহার করে চেষ্টা করেছেন:

direction: rtl;

আরও তথ্যের জন্য দেখুন
http://www.w3schools.com/cssref/pr_text_direction.asp

Question 3

আমার একই সমস্যা ছিল এবং দুটি ডিভ ব্যবহার করে এটি সমাধান করা হয়েছে। বাইরের ডিভটি বামদিকে ক্লিপিং করে এবং অভ্যন্তরীণ ডিভটি ডানদিকে ভাসমান করে।

.outer-div {
  width:70%;
  margin-left:auto;
  margin-right:auto;
  text-align:right;
  overflow:hidden;
  white-space: nowrap;
}

.inner-div {
  float:right;
}

:

<div class="outer-div">
  <div class="inner-div">     
    <p>A very long line that should be trimmed on the left</p>
  </div>
</div>

আপনার অভ্যন্তরীণ ডিভের মধ্যে কোনও সামগ্রী রাখতে এবং এটি বাম দিকে উপচে পড়তে সক্ষম হওয়া উচিত।

Question 4

আপনি করতে পারেন float:right এবং এটি বাম দিকে উপচে পড়বে, তবে আমার ক্ষেত্রে উইন্ডোটি উপাদানটির চেয়ে বড় হলে ডিভটি কেন্দ্র করতে হবে তবে উইন্ডোটি ছোট হলে বামদিকে উপচে পড়তে হবে। কোন চিন্তা?

আমি প্রায় খেলতে চেষ্টা করেছি direction:rtlকিন্তু এটি ব্লক উপাদানগুলির ওভারফ্লো পরিবর্তন করতে পারে না।

আমি মনে করি একমাত্র উত্তর এটি ডানদিকে ডানদিকে একটি ডিভ দিয়ে ডানদিকে ভাসা, তারপরে ডিভের প্রস্থটি ডানদিকে অর্ধেক বাকী উইন্ডো জায়গাকে jquery দিয়ে সেট করুন।

Question 5

সহজেই সম্পন্ন করা যায়, <span>সংখ্যাগুলি এবং ওভারফ্লো লুকিয়ে থাকা কোনও উপাদানের ভিতরে ডানদিকে স্প্যানটি সম্পূর্ণরূপে নির্ধারণ করে।

<div style="width: 65px; height: 20px;
            overflow: hidden; position: relative; background: #66FF66;">
    <span style="position: absolute; right: 0;">05451234567</span>
</div>

:)

rgrds জেক

Question 6

এটা চমত্কার ভাবে কাজ করেছে:

<div style="direction: rtl;">
  <span style="white-space: nowrap; direction: ltr; display: inline-block;">your short or long comment<span>
</div>

Question 7

এইচটিএমএল মার্কআপ সংশোধিত হয়েছে এবং ওয়েবওয়ান্ডারারের জেএসফিডাল সমাধানটিতে কিছু জাভাস্ক্রিপ্ট যুক্ত করেছে।

https://jsfiddle.net/urulai/bfzqgreo/3/

এইচটিএমএল:

<div id="outer-div">

    <p>ipsum dolor amet bacon venison porchetta spare ribs, tongue turducken alcatra doner leberkas t-bone rump ball tip hamburger drumstick. Shoulder strip steak ribeye, kielbasa fatback pig kevin drumstick biltong pork short loin rump. Biltong doner ribeye, alcatra landjaeger tenderloin drumstick t-bone pastrami andouille. Sirloin spare ribs fatback, bresaola strip steak alcatra landjaeger kielbasa cupim doner. </p>

</div>

সিএসএস:

#outer-div {
  width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align:right;
  overflow:hidden;
  white-space: nowrap;
  border:1px solid black;
}

জেএস:

let outer = document.getElementById("outer-div");
outer.scrollLeft += outer.scrollWidth;