Переполнение влево вместо правого
Вопрос
У меня есть div с overflow:hidden
, внутри которого я показываю номер телефона по мере того, как пользователь вводит его.Текст внутри div выравнивается по правому краю, а входящие символы добавляются справа по мере увеличения текста влево.
Но как только текст становится достаточно большим, чтобы не поместиться в div, последние символы числа автоматически обрезаются, и пользователь не может видеть новые символы, которые он вводит.
Что я хочу сделать, это обрезать левые символы, например, div показывает крайнюю правую часть своего содержимого и переливается на левую сторону.Как я могу создать этот эффект?
Решение
Вы пробовали использовать следующее:
direction: rtl;
Для получения дополнительной информации см.
http://www.w3schools.com/cssref/pr_text_direction.asp
Другие советы
У меня была та же проблема, и я решил ее, используя два деления. Внешний 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>
Вы должны иметь возможность помещать любой контент во внутренний блок и переполнять его слева.
Вы можете сделать float:right
, и он переполнится влево, но в моем случае мне нужно центрировать div, если окно больше, чем элемент, но переполнить влево, если окно меньше. Есть мысли по этому поводу?
Я пытался поиграться с direction:rtl
, но это не меняет переполнение элементов блока.
Я думаю, что единственный ответ состоит в том, чтобы поместить его правильно, с div справа от него, который также перемещается вправо, а затем установить ширину div вправо, чтобы половина оставшегося пространства окна была выполнена с помощью jquery.
легко сделать, <span>
введите числа и расположите абсолютный интервал справа внутри элемента со скрытым переполнением.
<div style="width: 65px; height: 20px;
overflow: hidden; position: relative; background: #66FF66;">
<span style="position: absolute; right: 0;">05451234567</span>
</div>
:)
ргрдс джейк
Это сработало как шарм.
<div style="direction: rtl;">
<span style="white-space: nowrap; direction: ltr; display: inline-block;">your short or long comment<span>
</div>
Модифицировал HTML-разметку и добавил немного javascript в решение 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;