Могу ли я обернуть им текст?
У меня есть изображение, установленное по стилю CSS 100x75. Когда он не загружается, альтернативный текст загружается в пространство, но расширяет контейнер до ширины более 100 пикселей.
Как я могу предотвратить это? Либо срезая его, либо оборачивая.
7 ответов
Ну, я понял это до некоторой степени. Я просто завернул изображение в контейнер такого же размера. Я предполагаю, что мой браузер (Firefox) не переносил текст, потому что это был встроенный элемент.
Спасибо всем за ваши ответы.
В качестве альтернативы:
- ты можешь использовать
overflow: hidden;к изображению. Это будет скрывать альтернативный текст, который пересекает границу изображения. Хотя это не обернет текст. - также уменьшите размер альтернативного текста.
#idlogo img {
overflow: hidden;
font-size: 10px;
}
Цель alt Text - дать возможность программе чтения с экрана узнать об изображении, поэтому я думаю, что уменьшение размера альтернативного текста и скрытие переполнения должно сработать лучше всего. Но, конечно, избегайте использования очень длинного текста.
В общем, нет способа контролировать отображение альтернативного текста, и большинство браузеров создают свою собственную версию (некоторые используют всплывающие подсказки, некоторые в строке состояния внизу). Вы не можете использовать разметку в альтернативных текстах, хотя некоторые браузеры представляют разрыв строки как разрыв строки (хотя большинство не будет). Смотрите эту статью для более.
Атрибут alt предназначен для альтернативного текста; он должен быть кратким и описывать функцию, которую он имеет, или содержание, которое он представляет.
Вот хорошее прочтение на эту тему от Роджера Йоханссона на 456 Berea Street - Написание хорошего альтернативного текста
В общем, если вы пишете параграф, вы делаете это неправильно. Посмотрите на использование атрибута longdesc (который является ссылкой на страницу, описывающую изображение, которое дополняет альтернативный текст).
НТН
Только что обнаружил, хоть в Хроме можно поставить
overflow-wrap: break-wordи он завернет.
picture, img
{
overflow-wrap: break-word;
}
Для Firefox вы можете использовать атрибут align:left, Это предотвратит возникновение проблемы с выравниванием текста alt, но переполнит доступное пространство. И для этого вы можете использовать соответствующий атрибут font-size.