ホームページ > 記事 > ウェブフロントエンド > CSS を使用してタイトルをインターセプトし、省略記号を使用して余分な部分を示す方法part_html/css_WEB-ITnose
CSS を使用してタイトルをインターセプトし、省略記号を使用して余分な部分を示す方法part_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:40:401071ブラウズ
CSS を使用してタイトルをインターセプトし、省略記号を使用して余分な部分を示す方法:
多くの Web サイトでは、ニュースのタイトルが長すぎる場合、通常、その一部をインターセプトして省略記号 (. . .) はインターセプトされた部分を示します。もちろん、この効果はバックエンド プログラマによっても実現できます。もちろん、フロントエンド スタッフも CSS を使用してこの効果を実現でき、これには多くの利点があります。この効果を実現する方法について簡単に紹介します。コード例は次のとおりです。
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">div{ overflow:hidden; white-space:nowrap; height:30px; width:230px; border:1px solid red; line-height:30px; margin-top:10px; text-overflow:ellipsis;}</style></head><body><div class="first">每一天都是新的，所以生活要和昨天有所不同！</div></body></html> 上記のコードは、text-overflow 属性値を省略記号に設定するだけで、必要な効果を実現します。
特記事項: 有効にするには、overflow:hidden とwhite-space:nowrap を設定する必要があります。そうしないと、テキストがオーバーフローしたり、改行が発生したりします。
元のアドレス: http://www.51texiao.cn/div_cssjiaocheng/2015/0504/724.html
元のアドレス: http://www.softwhy.com/forum.php?mod=viewthread&tid = 4644
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。