如何为img标签的alt属性（word-break：break-all属性在IE中不起作用）编写css

Question

我在锚标签中有一个img标签。 ancher标签位于div标签内。我正在使用img标签的alt属性。 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; 
} 

我申请自动换行&断行CSS属性图像的alt属性，但它也没有工作。任何机构能帮助我吗？这只发生在IE中。如果我为img标签使用“word-break：break-all”CSS属性，而不是在Chrome中正常工作，但在IE中不起作用。

Answer 1

你只需要设置一个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%; 
} 

Answer 2

只是风格

img { color: red; } 

的ALT标签的文本样式

Answer 3

请通过我的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; 
} 

在第一image，我用word-break:break-all断裂，包裹img包装内的文字alt。而在后者中，我使用text-overflow:ellipsis隐藏额外的alt文本，当它超过img包装。

Answer 4

使用本。

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