我有以下标记:
<h5>
<a href="javascript:void(0);">I am a very long title and I need to be shortened</a>
</h5>
我怎样才能使h5
文本高于一定数量的字符,我摆脱其他字符并用“......”替换它们?
答案 0 :(得分:5)
这应该有效。您必须将内联元素显示为块。
编辑:刚刚意识到如果H5超过了一些字符,你想要添加点,而不是超过宽度。我想这样做你需要使用JS - 请查看其他答案。
h5 {
display: block;
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
color: red; /* This needs to match the color of the anchor tag */
}
a:link {
color: red;
}
<h5>
<a href="javascript:void(0);">I am a very long title and I need to be shortened</a>
</h5>
答案 1 :(得分:3)
你可以这样做:
var name = $('a').text();
if (name.length > 20) {
var shortname = name.substring(0, 20) + " ...";
$('a').replaceWith(shortname);
}
答案 2 :(得分:0)
<h5 id="expansion">
<a id="myLink" href="javascript:void(0);">I am a very long title and I need to be shortened And Also I am a very long title and I need to be shortened</a>
</h5>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
if($('#myLink').text().length > 20){
var linkText = $('#myLink').text();
$('#myLink').html(linkText.substring(0,20)+"...")
$('#myLink').on("click",function(){
console.log("linkText :: ",linkText);
$('#myLink').html(linkText);
});
}
</script>
答案 3 :(得分:0)
如果要使用javascript,可以通过原型扩展String
对象:
String.prototype.limit = function(length) {
return this.length > length ? (this.substring(0, length) + '...') : this;
}
var str = 'qwertyuiop';
console.log(str.limit(5)); // qwert...
答案 4 :(得分:-2)
这个正在运作
<h5>
<a class ="one" href="javascript:void(0);">I am a very long title and I need to be shortened</a>
</h5>
<style>
.one
{
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
display:inline-block;
width : 100px;
}
</style>
根据您的网站设计设置宽度