Блог

Главная - Вопросы по программированию - Иметь float: сжимаемый правый диапазон

Иметь float: сжимаемый правый диапазон

#html #css

#HTML #css

Вопрос:

Пожалуйста, посмотрите на эту скрипку для моей ситуации. По сути, у меня есть плавающий span , который мешает, когда окно становится маленьким (оно переходит на другую строку).

Когда окно маленькое, я хочу, чтобы плавающий диапазон уменьшался с текстом, который не помещается скрытым (какой-то overflow: hidden , я думаю). По сути, я хочу отдать приоритет тексту слева, и плавающий span постепенно исчезает, поскольку окно становится маленьким.

Комментарии:

1. Значит, весь текст должен быть в одной строке, а текст справа должен постепенно обрезаться?

Ответ №1:

См.: http://jsfiddle.net/thirtydot/XMX9y/

CSS:

 .row {
    border: 1px dashed #444;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: right;
}
/* first span */
.row span:first-child {
    float: left;
    margin-right: 20px;
}
/* second span */
.row span   span {
    background: #ddd;
}

HTML:

 <div class="row">
    <span>left left left left left left</span>
    <span>What is the best way to</span>
</div>

Комментарии:

1. Гениально. Отлично работает в Chrome.

2. Если вам не нужно поддерживать старые браузеры, вы можете перейти .row span span на .row span:last-child , что понятнее.

3. Попробуйте это: jsfiddle.net/XMX9y/3 . Порядок span s должен был быть изменен.

4. Да! Ну, предпочтительно Webkit.

Метки: