ホームページ > 記事 > ウェブフロントエンド > 純粋な CSS_html/css_WEB-ITnose で実装されたインターセプト文字列の後に省略記号コードを追加する例
純粋な CSS_html/css_WEB-ITnose で実装されたインターセプト文字列の後に省略記号コードを追加する例
- WBOYオリジナル
- 2016-06-24 11:29:201789ブラウズ
純粋な CSS によって実装されたインターセプト文字列の後に省略記号コードを追加する例:
通常、文字列のインターセプトにはバックグラウンド言語または JavaScript が使用されます。もちろん、私のページでは、より正確で柔軟なため、上記の方法をお勧めします。
ただし、純粋な CSS を使用して文字列をインターセプトし、余分な部分を省略記号に置き換えることもできます。
コードは次のとおりです:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#box li{ line-height:28px; width:330px; text-align:center; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}</style></head><body><ul id="box"> <li>蚂蚁部落欢迎您，只有努力奋斗才会有美好的未来。</li> <li>没有人一开始就是高手，所以要虚心学习。</li> <li>每一天都是新的，请好好珍惜当前的事件。</li> <li>分享的胸怀和互助的精神是进步的最大源动力。</li></ul></body></html>
上記のコードは、次のコードを使用するだけで、文字列をインターセプトする機能を正常に実装します:
text-overflow:ellipsis;white-space:nowrap; overflow:hidden;
元のアドレスは、http://www.softwhy です。 .com/forum.php?mod=viewthread&tid=14505
詳細については、http://www.softwhy.com/divcss/
を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。