我有几张卡片,但每张卡片都有不同的文字,但我希望它们都具有相同数量的文字,以便稍后单独显示“阅读更多”,尽管那是另一回事。只是我想要的是只出现一定数量的文本,以便它可以是对称的并且大小都相同。
这是我的代码:
<div class="card">
<img class="card-img-top" src="{{ $message->image }}" alt="">
<div class="card-body">
<small class="text-muted">Escrito por <a href="/{{ $message->user->username }}">{{ $message->user->name }}</a></small>
<p class="card-text">
{{ $message->content }}
<a href="/messages/{{ $message->id }}">Leer más</a>
</p>
</div>
<div class="card-footer">
<small class="text-muted float-rightcuarderno de refuerzo lapiz">{{ $message->created_at }}</small>
</div>
</div>
我希望它们都具有相同长度的文本
你可以使用Laravel 的str_limit助手,它完全符合你的需要:
我想要这样的东西:
在这种情况下,使用
{{ str_limit($message->content, 50, '...') }}
它会将文本截断为仅 50 个字符并在末尾添加省略号。使用此功能,它会计算您指示的单词并省略或剪切文本直到该限制。
就这样称呼吧。
第一个值是您的文本字符串,第二个是要显示的字数限制,并在您建立的限制后添加三个点。
我还建议给你的 CSS 一个固定的高度
DIV
,这样它们的大小都是一样的。您可以使用 CSS3 的text-overflow和white-space属性仅显示一行文本,如果文本仍然缺失,则在末尾显示一个省略号。
如果你希望它不止一行,你可以参考这篇文章。