ホームページ > ウェブフロントエンド > htmlチュートリアル > ellipses_html/css_WEB-ITnoseで単行および複数行のテキストオーバーフローを表示する方法のまとめ

ellipses_html/css_WEB-ITnoseで単行および複数行のテキストオーバーフローを表示する方法のまとめ

WBOY
リリース: 2016-06-24 11:30:27
オリジナル
1657 人が閲覧しました

要件:

フロントエンド ページ レイアウトでは、テキストが多すぎるとページ レイアウトに影響を与えることがよくあります。特にモバイルページでは、画面幅が十分でない場合、段落テキストを完全に表示するとレイアウトが崩れてしまいます。したがって、画面の自由なサイズに合わせて段落テキストが表示されれば完璧です。つまり、画面が十分に大きい場合は段落テキストが完全に表示されます。部分的に楕円形で表示されます。

解決策:

CSS3 には text-overflow 属性があります。詳しくない学生は、ここをクリックして確認してください。 1 行のテキストの省略記号のオーバーフロー表示を実現するために使用されます。1 行のテキストの省略記号のオーバーフロー表示は、最新のブラウザーやモバイル端末と互換性があります。

効果は以下のとおりです:

実装方法:

        <p>作为微软的游戏平台,Xbox已经出现在了Windows Phone和Windows 8中,就在最近,微软宣布将旗下的Zune消费品牌也一并整合至Xbox品牌下,Xbox Live服务影响力越来越大,渗透面也越来越广。</p>
ログイン後にコピー

    p {        width: 410px;        overflow: hidden;        text-overflow: ellipsis;        white-space: nowrap;    }
ログイン後にコピー

質問は次のとおりです: 複数行のテキストオーバーフローを実装したい場合はどうすればよいですか?楕円を表示しますか?

解決策: Webkit は、-webkit-line-clamp という属性をサポートしています。これに詳しくない学生は、ここをクリックして確認してください。このプロパティはサポートされていない WebKit プロパティであり、ドラフト CSS 仕様には含まれていません。ただし、Webkit カーネルを備えたブラウザでは使用できます。

効果は図に示すとおりです:

実装方法:

    
<p>作为微软的游戏平台,Xbox已经出现在了Windows Phone和Windows 8中,就在最近,微软宣布将旗下的Zune消费品牌也一并整合至Xbox品牌下,Xbox Live服务影响力越来越大,渗透面也越来越广。</p>

固定一个喜欢的网站可不可以?当然!把每天常去的网站统统固定到开始屏幕中。如何固定?打开 IE10,在网页空白处点击鼠标右键,在应用栏中点击“图钉”图标即可完成固定。

先前给大家介绍了很好用的 Colors!今天给大家介绍一款风格不同的画画软件——Fresh Paint,我们可以用它画出油画。

ログイン後にコピー

    .figcaption {        background: #EEE;        width: 410px;        height: 3em;        margin: 1em;    }        .figcaption p {        line-height: 1.5em;        overflow: hidden;        text-overflow: ellipsis;        display: -webkit-box;        -webkit-line-clamp: 2;        -webkit-box-orient: vertical;        /*因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;*/    }
ログイン後にコピー

質問はまた出てきます: 他の主流ブラウザで完全な互換性を実現する方法? JSで実装する必要があるようです

解決策:

(実装原則: 要素の高さが親要素の高さより小さくなるまで、後ろから前に最後の文字を1つずつ置き換えることによって) ❤️

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート