Оберните длинный href в div с плавающим изображением

69
5

Я пытаюсь обернуть текст вокруг плавающего изображения длинным href как часть текста.


Я могу заставить текст обернуть никаких проблем, но когда я добавлю длинную ссылку (ширина whos превышает ширину плавающего изображения), ссылка будет вынута ниже плавающего изображения.


Итак, это:


 __________________________
| text text text _____ |
| text text text | | |
| text text text |_____| |
| text text text |
| text text text text text |
| text text. |
|__________________________|

становится следующим:


 __________________________
| text text text _____ |
| text text text | | |
| text text |_____| |
| |
| <this is the link> text |
| text text text text text |
| text. |
|__________________________|

Где бы я хотел:


 __________________________
| text text text _____ |
| text text text | | |
| text text <this |_____| |
| is the link> |
| text text text text text |
| text text. |
|__________________________|

Я пробовал "word-break: break-all"; но, конечно, это ломает каждую линию, часто среднее слово.


Я рассмотрел использование JavaScript для вставки "< wbr/ > " теги после протокола, домена, расширения и любых параметров uri в текстовой части тега "a", но надеялись на решение CSS, если оно существует.


Вот JSFiddle из головоломки http://jsfiddle.net/vBbau/2/.


Кто-нибудь знает более элегантное решение?


Приветствия.

спросил(а) 2013-07-14T16:02:00+04:00 6 лет, 7 месяцев назад
1
Решение
50

Это не проблема "ссылки". Это связано с тем, что внутренний html ссылки рассматривается как одно большое слово без пробела. Поэтому большое слово должно соответствовать, не нарушая себя.


Если вы попробуете большое слово как обычный текст вне ссылки, оно также сломает плавание.


Применить break-all только к ссылке, чтобы оно получилось:


.container .content a{
word-break:break-all;
}

JSfiddle: http://jsfiddle.net/qR46N/1/


И если ваша ссылка является первым текстом, может быть, может получиться трюк:


JSfiddles: http://jsfiddle.net/qR46N/3/

ответил(а) 2013-07-14T16:37:00+04:00 6 лет, 7 месяцев назад
36

Создайте еще один класс для <a> и примените следующий css


.container .content a{
display: inline-block;
max-width: 130px;
vertical-align: middle;
}

FIDDLE

ответил(а) 2013-07-14T16:14:00+04:00 6 лет, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема