दाएं के बजाय बाएं ओर ओवरफ्लो

Question

मेरे पास एक div है overflow:hidden, जिसके अंदर मैं फोन नंबर दिखाता हूं जैसे कि उपयोगकर्ता इसे टाइप करता है। Div के अंदर का पाठ दाएं से जुड़ा हुआ है और पाठ के बाईं ओर बढ़ने पर आने वाले वर्णों को दाएं से जोड़ा जाता है।

लेकिन एक बार पाठ बड़ा होने के बाद भी div में फिट नहीं होता है, संख्या के अंतिम वर्ण स्वचालित रूप से क्रॉप हो जाते हैं और उपयोगकर्ता नए वर्णों को नहीं देख सकता है।

मैं जो करना चाहता हूं वह बाएं पात्रों को क्रॉप करता है, जैसे div अपनी सामग्री का सबसे सही दिखा रहा है और बाईं ओर बह रहा है। मैं यह प्रभाव कैसे बना सकता हूं?

Comments

किसी को भी, जो पाठ चलाने के लिए ऊपर से नीचे और दाएं संरेखित करने की कोशिश करता है, के लिए चेकआउट stackoverflow.com/a/53576895/4418836

— जॉर्डन

Answer 1

क्या आपने निम्नलिखित का उपयोग करने की कोशिश की है:

direction: rtl;

अधिक जानकारी के लिए http://www.w3schools.com/cssref/pr_text_direction.asp देखें

Comments

चेतावनी: यह विशेष वर्ण जैसे / और * के साथ एक कैलकुलेटर डिस्प्ले के लिए काम नहीं करता है।

— अधिकतम

यह हजार विभाजक के लिए "" जैसे गैर यूएस नंबर फ़ॉर्मेटिंग वाले स्थानों के लिए भी काम नहीं करता है। यह सही समाधान नहीं है

— रॉबर्ट स्लैनी

यह गुण संरेखण के लिए नहीं है, और यह शब्दों के क्रम को भी अंदर बदल देगा। Fe फ़ायरफ़ॉक्स में 14:00–15:00बदल जाएगा 15:00–14:00।

— एंडी

क्या यह पात्रों के क्रम को भी उल्टा नहीं करता है?

— evolutionxbox

हां, आपको direction: ltrप्रभाव को उलटने के लिए नियम के साथ किसी अन्य तत्व में निहित तत्वों को लपेटने की आवश्यकता है ।

— सकर गोमेज़ अलकनीज़

Answer 2

मुझे एक ही समस्या थी और इसे दो डिवीजनों का उपयोग करके हल किया। बाहरी div बाईं तरफ की कतरन करता है और भीतरी 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>

आपको किसी भी कंटेंट को इनर डिव के अंदर रखने में सक्षम होना चाहिए और इसे बाईं ओर ओवरफ्लो करना चाहिए।

Comments

मैं इस काम को देखना चाहता था, इसलिए मैंने इसका परीक्षण करने के लिए यह JSField बनाया और यह बहुत अच्छा काम करता है! बहुत बढ़िया जवाब! धन्यवाद!

— वेबवेंडर

यह एक शानदार उत्तर है क्योंकि दिशा आरटीएल के सभी प्रकार के दुष्प्रभाव हैं। यदि आप यह सुनिश्चित करना चाहते हैं कि आंतरिक div को संरेखित किया गया है और यदि div को पार किया गया है तो केवल बाईं ओर छंटनी की गई है, .net-div को अधिकतम-चौड़ाई: 100% और प्रदर्शन: इनलाइन-ब्लॉक पर सेट करें। यहाँ

— ल्यूक

JSFiddle WebWanderer के लिए धन्यवाद। मैंने इसे अपडेट करने के लिए अपडेट किया है overflow: visibleताकि सामग्री बाएं हाथ की ओर से लीक हो सके ।

— 5

Answer 3

आप कर सकते हैं float:rightऔर यह बाईं ओर अतिप्रवाह करेगा, लेकिन मेरे मामले में मुझे div को केंद्र में रखने की आवश्यकता है यदि विंडो तत्व से बड़ा है, लेकिन विंडो छोटी होने पर बाईं ओर अतिप्रवाह। उस पर कोई विचार?

मैंने साथ खेलने की कोशिश की, direction:rtlलेकिन यह ब्लॉक तत्वों के अतिप्रवाह को बदलने के लिए प्रकट नहीं होता है।

मुझे लगता है कि इसका एकमात्र उत्तर सही फ्लोट करना है, एक div के साथ इसके दाईं ओर जो कि सही भी फ्लोट है, फिर jquery के साथ शेष विंडो स्थान के आधे भाग के लिए div की चौड़ाई को दाईं ओर सेट करें।

Comments

इस बात से सहमत। माता-पिता को दाईं ओर फ़्लोट करें और सुनिश्चित करें कि कोई भी हस्तक्षेप करने वाले कंटेनर में छिपा हुआ ओवरफ़्लो सेट न हो।

— लीसा

Answer 4

आसानी से किया, <span>संख्या और स्थिति अतिप्रवाह के साथ एक तत्व के अंदर दाईं ओर छिपा हुआ है।

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

:)

रेकग जेक

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 मार्कअप संशोधित और WebWanderer के jFFiddle समाधान के लिए कुछ जावास्क्रिप्ट जोड़ा गया।

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>

सीएसएस:

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