Как написать css для атрибута alt тега img (свойство word-break: break-all не работает в IE)

У меня есть тег img внутри тега привязки. Тег ancher находится внутри тега div. Я использую атрибут alt тега img. Значением атрибута alt является текст длиной 68 символов. Моя проблема заключается в том, что значение атрибута alt (текст) выходит за пределы div и скрыто в IE. Я имею в виду, что после отображения нескольких символов остальные символы обычно скрываются или обрезаются. Вот мой фрагмент html-кода.

<div class="products">
    <div class="prod-image"  id="catEntryImage">
        <div class="prodClass" id=WCCE>
           <a><img alt="some text total around 70 character" src="someURL"/></a>
           <P class=gasCode></P>
        </div>
   </div>
   <div class="prod-content"></div>
   <script type="text/javaScript"></script>
</div>

CSS для заданного фрагмента html

div {
    line-height: 1.4em;
    word-break: break-all;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: arial, helvetica, sans-serif;
    font-size: 100%;
}

img {
    text-decoration: none;
    border:0;
}

a {
    color: #e10014;
    text-decoration: none;
    font-size: 1.2em;
}
.products .prod-image {
    width: 135px;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    text-align: center;
    vertical-align: bottom;
    overflow: hidden;
    max-height: 250px;
    overflow: hidden;
}
.products .prod-content {
    width: 288px;
    float: left;
    margin-bottom: 20px;
    text-align: left;
    vertical-align: bottom;
}

Я применил свойство word-wrap & line-break css к атрибуту alt изображения, но это также не сработало. Может ли какой-нибудь орган помочь мне с этим? Это происходит только в IE. Если я использую свойство css «word-break: break-all» для тега img, он отлично работает в chrome, но не работает в IE.


html css internet-explorer dojo
person Prakhar Jain    schedule 17.08.2015    source источник
comment
не могли бы вы предоставить здесь html-код .. чтобы мы могли более точно определить вашу проблему.   -  person pedram    schedule 17.08.2015
comment
Я предоставил фрагмент html и css выше.   -  person Prakhar Jain    schedule 17.08.2015
comment
Который IE отлично работает здесь, на IE11 и IE10.   -  person vivekkupadhyay    schedule 17.08.2015
comment
@vivekkupadhyay Это IE 11. Пожалуйста, проверьте, я обновил полную структуру html-фрагмента выше.   -  person Prakhar Jain    schedule 17.08.2015

Ответы (4)


arrow_upward
4
arrow_downward

Вам просто нужно установить height и width для родителя изображения, которым является .prodClass, а также установить height и width для <img> Alt должен позаботиться о себе.

https://jsfiddle.net/Lu3tu98b/5/

<div class="prodClass">
     <a>
        <img alt="This will contain a really long sentence with more than 70 characters right here." src="someURL"/>
    </a>       
</div>

.prodClass {
    height: 150px;
    width: 150px;
    background-color: wheat;
}

.prodClass img {
    background-color: pink;
    width: 100%;
   height: 100%;
}
person Miss.Vy    schedule 17.08.2015
comment
Обновлен пример в IE 11 - person Miss.Vy; 18.08.2015

arrow_upward
1
arrow_downward

Пожалуйста, просмотрите мой JSFIddle, я надеюсь, что это именно то, чего вы пытаетесь достичь.

Я создал два отдельных images с большим alt текстом.

HTML:

<a class="a1"><img alt="some text total around 70 character some text total around 70 character some text total around 70 character some text total around 70 character some text total around 70 character" src="someURL"/></a>

<a class="a2"><img alt="some text total around 70 character some text total around 70 character some text total around 70 character some text total around 70 character some text total around 70 character" src="someURL"/></a>

CSS:

.a1{
     text-decoration: none;
    border:0; 
    width:270px; 
    word-break:break-all; 
    height:auto;
    display: block;
   }

.a2{
   text-decoration: none;
   border: 0px none;
   width: 270px;
   word-break: break-all;
   height: auto;
   text-overflow: ellipsis;
   overflow: hidden;
   display: block;
   white-space: nowrap;
 }

В First image я использовал word-break:break-all для разрыва и переноса текста alt в оболочку img. В то время как в более позднем я использовал text-overflow:ellipsis, чтобы скрыть лишний текст alt, когда он превышает оболочку img.

person vivekkupadhyay    schedule 17.08.2015

arrow_upward
1
arrow_downward

использовать этот.

img{width:100px} // change this as per you requirement

это должно решить проблему с IE.

также укажите это в стиле только для IE. так что это не повлияет на работу другого браузера.

Нравиться:

 <!--[if IE]><style type="text/css"> img{width:100px}</style><![endif]-->

Чтобы решить проблему с IE 11: обратитесь к этому old post

person MarmiK    schedule 17.08.2015
comment
Пожалуйста, укажите версию IE, я думаю, вы говорите об IE 11, это новая задача, я обновил ссылку на старый пост в своем ответе, чтобы иметь дело с IE 11 - person MarmiK; 18.08.2015
comment
Если я не сохраняю цвет фона в css, он показывает границу на div. Сохранил границы: нет; но все же он показывает границу. Есть ли способ убрать эту границу? - person Prakhar Jain; 18.08.2015
comment
это должна быть граница изображения, сделайте то же самое с изображением img{border:none;} ИЛИ img { border-width: 0;} - person MarmiK; 18.08.2015

arrow_upward
0
arrow_downward

просто стиль

img { color: red; }

для стиля текста тега alt

person Amit singh    schedule 17.08.2015
comment
ваше предложение отлично работает для изменения цвета текста внутри атрибута alt, но моя проблема в том, что текст не заключен в родительский div, поэтому большинство символов не отображаются, или я должен сказать, что значение тега alt скрыто. - person Prakhar Jain; 17.08.2015