純粋な CSS_html/css_WEB-ITnose で実装されたインターセプト文字列の後に省略記号コードを追加する例-htmlチュートリアル-php.cn

純粋な CSS_html/css_WEB-ITnose で実装されたインターセプト文字列の後に省略記号コードを追加する例

WBOY

リリース： 2016-06-24 11:29:20

オリジナル

1758 人が閲覧しました

純粋な 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/

を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

純粋な CSS_html/css_WEB-ITnose で実装されたインターセプト文字列の後に省略記号コードを追加する例