如何为 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>

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

只是风格

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

Answer 3

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

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

How to write css for alt attribute of img tag (word-break: break-all property doesn't work in IE)

html

css

dojo

internet-explorer

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

How to write css for alt attribute of img tag (word-break: break-all property doesn't work in IE)

html

css

dojo

internet-explorer

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