Question

我有一个视图，其中有多个瓷砖或Thumnails在行中排列在Disorder中我希望所有瓷砖必须具有相同的尺寸，我在该缩略图中定义标题和描述因此描述是多行文本我想缩短它并在缩略图中显示它所以是否有像Substring（）这样的函数？我正在用模型做这个

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

并添加了tile的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>

请建议我!!!

Answer 1

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

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

根据MVC制作相同大小的缩略图

1 个答案: