如何在9中的第二行中进行文本省略

时间:2017-08-09 06:49:03

标签: jquery html html5 css3 internet-explorer-9

我想用容器限制文本,我必须在第二行中设置文本省略号。 我希望这项工作在ie9 。宪章应该受到限制......可以应用css或jquery。但它具有可调整宽度,具体取决于宽度调整文本应该在包装器中限制。文本的左侧和右侧有一些图像,因此位置绝对不能被删除。它影响所有的风格。示例代码如下。请参考。我无法为它添加任何jquery插件。只能使用纯jquery或javascript或css

.container{
            width:450px;
            margin:0 auto;
        }
        .myText{
            position: absolute;
            top: 10px;
            left: 60px;
            margin-right: 24px;
            height: 100%;
            word-break: break-word;
        }
        .myText-Wrap{
            background: #e8e5e5;
            min-height: 40px;
            margin-top: 2px;
            font-size: 13px;
            cursor: pointer;
            margin-bottom: 5px;
        }
        .mytag{
            position: relative;
            width: 100%;
            display: block;
            min-height: 40px;
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
        }
<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <div class="container">
        <div class="myText-Wrap">
            <a href="#" class="mytag"> <span class="myText">jfgsdjjjjjjjjjj sdhfgsdhf shdfgashdfs hasgfashfa ahsgfhasgfhas ashgfhasgfhasf hasgfahsfasf asghfahsfga ajsfgashgfs f jasgfagsf</span> </a>
        </div>
        <div class="myText-Wrap">
            <a href="#" class="mytag"> <span class="myText">jfgsdjjjjjjjjjj sdhfgsdhf shdfgashdfs hasgfashfa ahsgfhasgfhas ashgfhasgfhasf hasgfahsfasf asghfahsfga ajsfgashgfs f jasgfagsf</span> </a>
        </div>
        <div class="myText-Wrap">
            <a href="#" class="mytag"> <span class="myText">jfgsdjjjjjjjjjj sdhfgsdhf shdfgashdfs hasgfashfa ahsgfhasgfhas ashgfhasgfhasf hasgfahsfasf asghfahsfga ajsfgashgfs f jasgfagsf</span> </a>
        </div>
        <div class="myText-Wrap">
            <a href="#" class="mytag"> <span class="myText">j122 ajsajjjjjjjjjjjjjjjj jhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</span> </a>
        </div>
        <div class="myText-Wrap">
            <a href="#" class="mytag"> <span class="myText">xzxzx</span> </a>
        </div>
        <div class="myText-Wrap">
            <a href="#" class="mytag"> <span class="myText">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span> </a>
        </div>
        <div class="myText-Wrap">
            <a href="#" class="mytag"> <span class="myText">jfgsdjjjjjjjjjj sdhfgsdhf shdfxcvbx fhasgfhas ashgfhasgfhasf hasgfahsfasf asghfahsfga ajsfgashgfs f jasgfagsf</span> </a>
        </div>
        <div class="myText-Wrap">
            <a href="#" class="mytag"> <span class="myText">jfgsdjjjjjjjjjj sdhfgsdhf f jasgfagsf</span> </a>
        </div>
        <div class="myText-Wrap">
            <a href="#" class="mytag"> <span class="myText">jfgsdjjjjjjjjjj sdhfgsdhf shdfgashdfs hasgfashfa ahsgfhasgfhas ashgfhasgfhasf hasgfahsfasf asghfahsfga ajsfgashgfs f jasgfagsf</span> </a>
        </div>
        <div class="myText-Wrap">
            <a href="#" class="mytag"> <span class="myText">jfgsdjjjjjjjjjj sdhfgsdhffhasf hasgfahsfasf asghfahsfga ajsfgashgfs f jasgfagsf</span> </a>
        </div>
        <div class="myText-Wrap">
            <a href="#" class="mytag"> <span class="myText">jfgsdjjjjjjjjjj sdhfgsdhf f jasgfagsf</span> </a>
        </div>
        <div class="myText-Wrap">
            <a href="#" class="mytag"> <span class="myText">jfgsdjjjjjjjjjj</span> </a>
        </div>
    </div>
</body>

</html>

请帮忙......

0 个答案:

没有答案