تجاوز إلى اليسار بدلا من اليمين

Question

ولدي شعبة مع overflow:hidden، داخلها تبين لي رقم هاتف وأنواع المستخدم ذلك. يتم محاذاة النص داخل شعبة على الحروف الصحيحة واردة تضاف إلى اليمين كما ينمو النص إلى اليسار.

ولكن بمجرد النص هو كبير بما يكفي كي لا يصلح في شعبة والشخصيات الأخيرة من العدد اقتصاص تلقائيا ولا يمكن للمستخدم رؤية شخصيات جديدة هي أنواع.

ما أريد القيام به هو المحصول الأحرف اليسرى، مثل شعبة يظهر في أقصى اليمين من محتواه وتفيض إلى الجانب الأيسر. كيف يمكنني إنشاء هذا التأثير؟

Answer 1

هل حاولت استخدام ما يلي:

direction: rtl;

لمزيد من المعلومات راجع
http://www.w3schools.com/cssref/pr_text_direction.asp

Answer 2

وكان لي نفس المشكلة وحلها باستخدام اثنين من عناصر div. وشعبة الخارجي لا لقطة على اليسار وشعبة الداخلي لا العائمة إلى اليمين.

.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>

ويجب أن تكون قادرة على وضع أي محتوى داخل شعبة الداخلي وتجاوز على اليسار.

Answer 3

ويمكنك القيام float:right وسيتم تجاوز إلى اليسار، ولكن في حالتي أنا بحاجة لتوسيط شعبة إذا كان الإطار أكبر من عنصر، ولكن تجاوز إلى اليسار إذا كان إطار أصغر. أي أفكار على ذلك؟

وحاولت اللعب حولها مع direction:rtl ولكن هذا لا يبدو أن تغيير الفائض من عناصر الكتلة.

وأعتقد أن الإجابة الوحيدة هي أن تطفو على حق، مع شعبة إلى اليمين منه وهذا ما طرحت أيضا حق، ثم تعيين عرض من شعبة بالحق في نصف مساحة نافذة المتبقية مع مسج.

Answer 4

والقيام به بسهولة، <span> الأرقام ووضع فترة المطلق للحق داخل عنصر مع تجاوز خفية.

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

:)

وrgrds جيك

Answer 5

وهذا يعمل مثل السحر:

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

Answer 6

والتعديل ترميز HTML وإضافة بعض جافا سكريبت لحل jsFiddle WebWanderer ل.

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

وHTML:

<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>

وCSS:

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

وJS:

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