| |
|
|
| | Всем привет, интересует вопрос, как сделать так, чтобы текст, находящийся в div или span шёл строго по горизонтали. Но если ширина div или span ограничена какими-то рамками, за которые текст не должен выходить, он просто пропадает на границе div или span. После чего хочу на правую сторону поставить полупрозрачный градиент с плавным переходом, чтобы был эффект исчезающего текста. Или здесь нужно просчитывать символы, резать текст и только потом ставить картинку? Как сделать грамотно и кроссбраузерно? Заранее спасибо! | |
| |
|
|
| |
|
|
| |
для: grafen
(27.06.2011 в 21:09)
| | | Не уверен, что это то что вам нужно, но есть такое CSS-свойство white-space, если оно принимает значение nowrap - автоматические переносы строк запрещены. Текст правда не обрубается, а так прямо и выводится... поэтому возможно это не совсем то, что вам требуется.
<div style='width: 200px; white-space: nowrap; border: 1px solid black;'>Очень длинный текст без
перереноса, который не будет переноситься ни при каких обстоятельствах. Да, это не совсем кошерно.
Но тут моментально устаревают любые технологии - чего уж кобениться...</div>
|
| |
| |
|
|
| |
автор: 0987654 (27.06.2011 в 21:45) |
|
| |
для: grafen
(27.06.2011 в 21:09)
| | |
<div style='width: 200px; height: 2em; line-height: 2em; overflow: hidden; border: 1px solid black;'>Очень длинный текст без
перереноса, который не будет переноситься ни при каких обстоятельствах. Да, это не совсем кошерно.
Но тут моментально устаревают любые технологии - чего уж кобениться...</div>
|
| |
| |
|
|
| |
|
|
| |
для: 0987654
(27.06.2011 в 21:45)
| | | Мм, спасибо, но там и там косячок))
В первом случае, текст действительно идет в одну строчку, но не обрезается.
Второй случай почти идеальный, но обрезает по словам. А мне нужен такой эффект, чтобы слово шло почти до края, а у самого края уже картинка делала своё дело. А в таком варианте, слова четко обрезаются, до градиента ещё далеко и получится, что и градиента не видно и непонятно что написано..))
Но направление правильное, спасибо уже за это! Надеюсь, есть вариант, чтобы текст обрезался прям у края div не по словам, а по символам. | |
| |
|
|
| |
автор: 0987654 (27.06.2011 в 22:17) |
|
| |
для: grafen
(27.06.2011 в 22:01)
| | | Совместить оба варианта не пробовали?
Попробуйте:
<div style='white-space: nowrap; width: 200px; height: 2em; line-height: 2em; overflow: hidden; border: 1px solid black;'>Очень длинный текст без
перереноса, который не будет переноситься ни при каких обстоятельствах. Да, это не совсем кошерно.
Но тут моментально устаревают любые технологии - чего уж кобениться...</div>
|
| |
| |
|
|
| |
|
|
| |
для: 0987654
(27.06.2011 в 22:17)
| | | Класс! Спасибо, идеально!!! | |
| |
|
|
