css中文字加圖片的布局實(shí)現(xiàn)
發(fā)布時間：2013-09-06 11:35:47 作者：佚名 
我要評論
我要評論在文章中難免會出現(xiàn)表情，在在這種情況下如何以比較合理的方式顯示文字與表情呢？其實(shí)很簡單，通過簡單幾行CSS樣式便可實(shí)現(xiàn)，感興趣的朋友可以了解下
html:
<div class="messagebox">
<span class="message">aaaaa<img src="e1.png">bbbbbbbbbbbbb<img src="e2.png">cccc</span>
</div>
css:
.messagebox
{
width: 300px;
height: auto;
word-wrap: break-word;
word-break:break-all;
white-space: pre-wrap;
background-color: #333;
padding: 0px;
margin:0px;
}
.message
{
font-size: 30px;
width: 300px;
height: auto;
}
img
{
width: 60px;
height: 50px;
}
效果圖：
復(fù)制代碼
代碼如下:<div class="messagebox">
<span class="message">aaaaa<img src="e1.png">bbbbbbbbbbbbb<img src="e2.png">cccc</span>
</div>
css:
復(fù)制代碼
代碼如下:.messagebox
{
width: 300px;
height: auto;
word-wrap: break-word;
word-break:break-all;
white-space: pre-wrap;
background-color: #333;
padding: 0px;
margin:0px;
}
.message
{
font-size: 30px;
width: 300px;
height: auto;
}
img
{
width: 60px;
height: 50px;
}
效果圖：
相關(guān)文章
CSS實(shí)現(xiàn)動態(tài)圖片的九宮格布局的實(shí)例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)動態(tài)圖片的九宮格布局的實(shí)例代碼，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-03css3 圖片圓形顯示 如何CSS將正方形圖片顯示為圓形圖片布局
這篇文章主要為大家介紹了正方形圖片使用CSS如何實(shí)現(xiàn)成圓形布局，不使用PS軟件處理，直接使用DIV CSS布局如何實(shí)現(xiàn)圖片圓形化，具體實(shí)現(xiàn)過程請看下文2014-10-10DIV+CSS中讓布局、背景圖片、文字內(nèi)容居中的方法
這篇文章主要為大家介紹了在DIV+CSS布局的頁面里，讓布局、背景圖片、文字內(nèi)容居中的方法，從布局內(nèi)容到頁面里文章文字居中都是非常重要的，而css來設(shè)置居中也是非常簡單的2014-10-09input輸入框中有圖片怎么使用css布局實(shí)現(xiàn)
input框中有圖片的情況下如何使用css實(shí)現(xiàn)，為了美觀、形象，一般都會在用戶名，密碼等輸入框中加一個圖片，其實(shí)很簡單，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-08-01
純css實(shí)現(xiàn)朋友圈不同數(shù)量圖片不同布局，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2020-06-10