Как сохранить метку, кнопку или TextArea в одной строке?

Question

Допустим, у меня есть объект Label, Button или TextArea, который содержит некоторое количество текста. По умолчанию все работает так, что текст, помещенный в эти объекты, автоматически переносится на следующую строку. Есть ли способ отключить это? Мне известно, что атрибут CSS

overflow : hidden ;

остановит показ полосы прокрутки. Но есть ли способ остановить переход текста на следующую строку?

Я бы хотел, чтобы, если бы у меня была строка, которая "шире" объекта, в который она помещена, она просто выписала бы строку до предела того, что может содержать объект, без переноса ее в следующая строка? У кого-нибудь есть способ сделать это?

Спасибо.

Answer 1

Вы можете использовать следующее определение CSS для достижения этого:

<style type="text/css">

.element {
        width:200px;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;        
}

</style>

<div class="element">
This text will not wrap.  Hamina hamina hamina hamina hamina.
</div>

Это должно предотвратить перенос текста на следующую строку. Если текст превышает ширину элемента, он обрезается. Если вы используете webkit / explorer, вы получите отличный эффект многоточия, когда текст обрезается (чтобы предположить, что текста больше, чем видно).

К сожалению, Firefox не поддерживает многоточие. Но текст все равно будет обрезан и не будет переноситься.

Я не проверял это определение с элементами button или textarea - только с divs. Но я не вижу причин, по которым это не должно работать. Я оставляю это вам, чтобы экспериментировать.