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

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>

给定 html 片段的 CSS

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和，该图像的父级也设置和。 alt 应该自行处理。width.prodClassheightwidth<img>

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%;
}