桌面和移動設備中的元素內的文本

美好的一天我一直在一個響應頭文件中工作，其中有一個元素內的文本，但只有在桌面屏幕上，在移動屏幕上打開文本應該後面的元素，但與一些格式樣式。桌面和移動設備中的元素內的文本

我知道「內容」屬性不支持HTML標籤，使我跑出來的非janky思想關於

http://codepen.io/tillegomezz/pen/rrjJxR

header { 
 
    background: #ccc; 
 
    height: 50px; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.content { 
 
    background: lightblue; 
 
} 
 
@media all and (max-width: 768px) { 
 
    header span { 
 
    display: none; 
 
    } 
 
    .content:before { 
 
    content: "<h1>Title Outside</h1>"; 
 
    } 
 
}

<div class="container"> 
 
    <header> 
 
    <span> Title Inside </span> 
 
    </header> 
 

 
    <div class="content"> 
 
    lorem ipsum foo bar so on. 
 
    </div> 
 
</div>

來源

2016-09-22 user1040363

改變，而不是把一個代碼塊中的鏈接繞過代碼的要求，它的建議只是將代碼放在你的問題的實際車。這個網站上的人會更有可能以這種方式幫助你。 – Serlite

k，謝謝@Serlite – user1040363

我想你必須使用CSS來設計你的元素：

.content:before { 
    content: "Title Outside"; 
    font-weight: bold; 
    font-size: ...; 
}

來源

2016-09-22 15:56:26

如何用折線？ 'content：「Title
outside」' – user1040363

在這種情況下，您不能使用html。解決方案是在HTML中添加HTML標籤，並使用CSS來隱藏元素 –

這就是我所做的，兩個div用於移動，另一個用於桌面和切換（隱藏/顯示）屏幕媒體查詢。 – user1040363

你的代碼沒問題。剛剛在本條

@media all and (max-width: 768px) { 
header span {display: none;} 

     .content:before { 
    content: "Title Outside"; 
    } 
}

header { 
 
    background: #ccc; 
 
    height: 50px; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 

 
.content { 
 
    background: lightblue; 
 
    
 
} 
 

 
@media all and (max-width: 768px) { 
 
    header span {display: none;} 
 

 
     .content:before { 
 
    content: "Title Outside"; 
 
    
 
    
 
    
 
} 
 
    }

<div class="container"> 
 
    <header> 
 
    <span> Title Inside </span> 
 
    </header> 
 

 
    <div class="content"> 
 
    lorem ipsum foo bar so on. 
 
    </div> 
 
</div>

來源

2016-09-22 17:07:38

桌面和移動設備中的元素內的文本

回答

相關問題