css - 鉴于 MVC 制作相同大小的缩略图

Question

我确实有一个 View ，其中一行中有多个无序排列的图 block 或缩略图，我希望所有图 block 的大小必须相同，并且我在该缩略图中定义标题和描述，因为描述是多行的文本我想缩短它并在该缩略图中显示它所以有没有像 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>

请给我建议!!!

Answer 1

让 CSS 为您代劳。添加宽度，然后添加:

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