2012-03-28 2 views
0

У меня есть плавающий пролет с некоторым текстом.
Я установил переполнение в скрытое, а ширина до фиксированной ширины - 100 пикселей.
Теперь, когда текст становится слишком длинным, он просто обертывается.
Я не хочу устанавливать высоту на фиксированные px, потому что таким образом, если я изменяю размер шрифта, я могу забыть обновить высоту и т. Д. любые идеи?Как установить вертикальную высоту, чтобы предотвратить переполнение по плавающей полосе?

<span style="float:left;overflow:hidden;width:100px;">Very Long Text</Span> 
+0

Я не уверен, что вы сможете это сделать без указания высоты. – Alex

+0

У меня нет проблемы с указанием высоты, я просто хочу, чтобы она была в относительной единице. но нет 1em. потому что это испортит линейный вес – Karim

+0

относительно того, что tho? – Alex

ответ

1

Похоже, вы, возможно, захотите попробовать что-то вроде:

CSS:

.floated-element { 
    float:left; /* Or right, whatever */ 
    width:100px; 
    white-space:no-wrap; /* Keeps the text to one line */ 
    text-overflow:ellipsis; /* This will add ... to the end of text that extends beyond 100px */ 
    overflow:hidden; 
} 

HTML:

<div class="floated-element"> 
    ... 
</div> 

Если вы действительно хотите использовать a <span>, а не поплавок <div>, вы хотите установить диапазон display в inline-block. Это позволит вам указать width, сохраняя при этом другие встроенные атрибуты.

+0

Я думаю, что переполнение: многоточие должно переполняться: скрыто, переполнение текста: эллипсис; , Я имею в виду его работу в FF, когда я изменил его на это. – Karim

+0

Упс! Ты прав. Обновлено сообщение. – Ryan

+0

ну, вам нужно добавить «переполнение: скрыто»; слишком. – Karim

0
  1. вы не можете установить width встраивать элементы.
  2. Объявление ширины и overflow:hidden на элементе блока автоматически расширяет элемент по вертикали, чтобы текст поместился.

Дополнительная информация о том, что вы пытаетесь достичь, будет полезна для дальнейшей помощи.

редактировать:

начальная идея overflow:hidden, чтобы скрыть избыточное содержание (часто используется в сочетании с фиксированными размерами). Возможно, вам захочется переосмыслить, что вы пытаетесь сделать (вам действительно нужно переполнение?).

+0

извините элемент плавает :) Я обновлю вопрос – Karim

+0

@Karim, поэтому вам не нужно устанавливать 'height', элемент будет автоматически расширяться содержимое может поместиться. – Christoph

+0

, и это моя проблема, что я хочу только отобразить 1 строку текста и отрезать все остальное, но она просто расширяется, чтобы отображаться на нескольких строках. – Karim

0

Я нашел решение своей проблемы.
Я не хотел устанавливать высоту для некоторого значения переменной, например, например, значение строки-высоты говорит 1.4em (поскольку она может меняться со временем, поэтому мне нужно будет найти и заменить все значения в приложении) ,
поэтому другое исправление, которое я нашел, это то, что я могу установить «белое пространство: nowrap»; на пролете.
ждут другие ответы :)

+0

неловко, что я не думал об этом ...: -/ – Christoph

+0

нет проблем , Это на самом деле один из плюсов от stackoverflow. У меня есть идея на самом деле путем поиска вопросов по stackoverflow :) – Karim

Смежные вопросы