0

我确实有一个视图，其中行中有多个无序排列的图块或缩略图我希望所有图块必须具有相同的大小，并且我在该缩略图中定义标题和描述，因为描述是我想要的多行文本缩短它并在该缩略图中显示它，所以有没有像 Substring() 这样的函数？我正在用模型做这个

public string ContentMetaDataTitle{get;set;}
        public string ShortDescription
        {
            get
            {
                var text = ContentMetaDataTitle;
                if (text.Length > 21)
                {
                    text = text.Remove(19);
                    text += "..";
                }
                return text;
            }
        }

并为图块添加了 CSS，如下所示：

.pin {
-moz-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
column-break-inside: avoid;
display: inline-block;
margin: 0 2px 5px;
padding: 5px;
border: 1px solid #eee;
border-radius: 5px;
font-size: 0.8em;
}

这就是我定义我的观点的方式：

<div class="pin video selectable" data-val="800034" data-type="Video" data-title="BTSScratchcard Ad.mov">

<span class="picBox">
        <a class="fancy" rel="_pic" title="BTSScratchcard Ad.mov" href="/Watch?height=350&amp;width=600&amp;file=http%3A%2F%2Fvidzapper.vidzapper.com%2Fdev%2Fbtsscratchcard-ad_mov_20130522021206.xml&amp;autoplay=True&amp;poster=http%3A%2F%2Fimages.vidzapper.com%2Fvidzapper.vidzapper.com%2Fdev%2Fbtsscratchcard-ad_mov_20130522021206-2.png%3Fw%3D650%26h%3D365&amp;v=3&amp;skin=tubecss">
            <img src="http://images.vidzapper.com/vidzapper.vidzapper.com/dev/btsscratchcard-ad_mov_20130522021206-2.png?w=280&amp;h=0" title="BTSScratchcard Ad.mov" alt="BTSScratchcard Ad.mov">
        </a>
</span>    <div class="title">BTSScratchcard Ad.mov</div>
    <div class="description">BTSScratchcard Ad.mov</div>
            <div class="btn-group">
            <a class="btn btn-small" href="/Meta/Edit/800034" title="Edit"><i class="icon-edit"></i></a>
            <a class="btn btn-small" href="/Meta/Details/800034" title="Details"><i class="icon-info-sign"></i></a>
            <a class="btn btn-small" href="/Meta/Details/800034?delete=True" title="Delete"><i class="icon-trash"></i></a>
                <a class="btn btn-small btnReEncode" href="/Meta/Encode/800034" title="Re-Encode"><i class="icon-repeat"></i></a>
                <a class="btn btn-small fancy" href="/Watch?height=350&amp;width=600&amp;file=http%3A%2F%2Fvidzapper.vidzapper.com%2Fdev%2Fbtsscratchcard-ad_mov_20130522021206.xml&amp;autoplay=True&amp;poster=http%3A%2F%2Fimages.vidzapper.com%2Fvidzapper.vidzapper.com%2Fdev%2Fbtsscratchcard-ad_mov_20130522021206-2.png%3Fw%3D650%26h%3D365&amp;v=3&amp;skin=tubecss" title="Play"><i class="icon-play"></i></a>
                <a class="btn btn-small" href="/Meta/Share/800034" title="Share"><i class="icon-share-alt"></i></a>
                <a class="btn btn-small xmlDownload dropdown-toggle"><i class="icon-download"></i></a>
                <a class="btn btn-small light" href="/Comment/Meta/800034" title="Comments"><i class="icon-comment"></i></a>
        </div>
</div>

请建议我！！！

4

1 回答 1

0

让 CSS 为您完成工作。添加宽度，然后添加：

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
于 2013-06-06T10:55:51.783 回答