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

Question

我在锚标签中有一个 img 标签。 ancher 标签位于 div 标签内。我正在使用 img 标签的 alt 属性。 alt 属性的值是长度为 68 个字符的文本。我的问题是 alt 属性值（文本）超出了 div 并且隐藏在 IE 中。我的意思是在显示几个字符后，通常其余字符会被隐藏或裁剪。这是我的html代码sn-p。

<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 sn-p 的 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;
}

我将 word-wrap & line-break css 属性应用于图像的 alt 属性，但它也不起作用。任何机构都可以帮助我吗？这仅在 IE 中发生。如果我对 img 标签使用“word-break: break-all”css 属性，它在 chrome 中可以正常工作，但在 IE 中不起作用。

Answer 1

只是风格

img { color: red; }

用于 alt 标签文本样式

Answer 2

请通过我的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 文本。而在后一个中，当超过 img 包装器时，我使用 text-overflow:ellipsis 隐藏额外的 alt 文本。

Answer 3

您只需要在图像的父级.prodClass 上设置height 和width 并在<img> 上设置height 和width 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 4

使用这个。

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

这应该会欺骗 IE 问题..

也可以在 IE only 样式中指定此项。所以不会影响其他浏览器的工作..

喜欢：

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

处理IE 11问题：请参考old post