web-dev-qa-db-ja.com

CSSの重複するテキスト-どうすれば変更できますか？

私のcssファイルの重複する要素（テキスト）を変更しようとしています。 （通常のブラウザでは）1行のテキストは、モバイルでは2行のテキストとして重なり合って表示されます。

この変更は、サイトのモバイルバージョン用です（横向きタブレットの@mediaセクション）。

現在、ヘッダー（h2）iPad /タブレットでテキストが重なっています。

H2からのコード@media セクション：

.da-slide h2{
    font-size: 36px;
    width: 80%;
    top: 40px;
    padding: 18px 20px 18px 20px;

（.da-slide h2は、このテキストをhtmlに保持するコンポーネントです）

line-heightプロパティが機能しませんでしたか？

何か案は...

htmlcssmobiletwitter-bootstraptablet
9
ThePlague

Line-height cssプロパティがクラスに適用されていることを確認しますか？

[〜＃〜] css [〜＃〜]

    .da-slide h2{
        font-size: 36px;
        line-height: 36px;
        width: 80%;
        top: 40px;
        padding: 18px 20px 18px 20px;
    }

それ以外の場合は、ヘッダーにメタタグを追加しましたか？

<meta name="viewport" content="width=device-width, initial-scale=1">

また、レスポンシブなWebサイトの場合は、テキストが調整されていないことを確認してください。

[〜＃〜] css [〜＃〜]

body { -webkit-text-size-adjust: none; }
20
Romain

これは、テキストが折り返されないようにすることでそれを行うはずですが、最後のテキストは切り取られます。つまり、幅より長いテキストは表示されません。

既存のクラスに追加するだけです：

display: block; /* may help stop any text wrapping and display it inline. */
display: inline; /* same as above */
white-space: nowrap;/* ensure no wrapping */
overflow: hidden; /* if for some reason it escapes the visible area don't display anything. */

個人的には、長いタイトルやタブレットデバイスに省略記号効果を使用するのが好きです。省略記号はテキストをトリミングし、テキストがトリミングされた場所に3つのドットを追加します。

text-overflow: Ellipsis; /* if text is too long add three dots to the end to indicate text  continues */

以下の効果の例：

This is an extremely long and completely unavoidable page title I need to show

これは非常に長く、完全に避けられないページタイトルです。

幅に応じて、次のように表示されます。

This is an extremely long...

お役に立てば幸いです。

5
STOP BIT