<div v-for="todo in updateDatas" :key="todo" style="color: #666 ; margin-top: 5px; text-align: left; margin-left: 30px;">
<span >{{todo.createTime}}  </span>
<span style="overflow-wrap:break-word;">{{ todo.title }}: {{ todo.content }}</span>
</div>
圖示效果
uj5u.com熱心網友回復：
就是內測內容換行的時候，不要讓內容超過測驗標題。不要跟日期對齊uj5u.com熱心網友回復：
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<base target="_blank">
</head>
<body>
<div style="width:100%">
<div style="width:20%;float:left;">
<span>2020-06-10</span>
</div>
<div style="width:80%;float:right">
<span>測驗標題</span>
<div><span>測驗內容111111111111111111111111111111111111111111111111</span></div>
</div>
</div>
</body>
</html>
uj5u.com熱心網友回復：
布局問題 把兩個span的內容單獨用盒子包起來 而不是直接扔倆spanuj5u.com熱心網友回復：
或者直接把span轉換為行內塊元素，設定css display: inline-block; 然后給個寬度uj5u.com熱心網友回復：
看了回復，挺無語的 1.變成塊元素，css設定：display：block2.外層加一個p標簽或者div標簽等塊元素
3.你可以直接用p標簽
uj5u.com熱心網友回復：
你這個float我也試過。單行還可以。for回圈多行的話。資料全亂了。
uj5u.com熱心網友回復：
你這樣會把日期獨立成一行。
uj5u.com熱心網友回復：
你這個我沒試過，我最后問題解決了。我是用table標簽。
uj5u.com熱心網友回復：
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<base target="_blank">
</head>
<body>
<div style="width:100%">
<div style="width:20%;float:left;">
<span>2020-06-10</span>
</div>
<div style="width:80%;float:right">
<span>測驗標題</span>
<div><span>測驗內容111111111111111111111111111111111111111111111111</span></div>
</div>
</div>
<div style="clear:both;width:100%">
<div style="width:20%;float:left;">
<span>2020-06-11</span>
</div>
<div style="width:80%;float:right">
<span>測驗標題</span>
<div><span>測驗內容222222222222222222222222222221</span></div>
</div>
</div>
<div style="clear:both;width:100%">
<div style="width:20%;float:left;">
<span>2020-06-12</span>
</div>
<div style="width:80%;float:right">
<span>測驗標題</span>
<div><span>測驗內容333333333333333333333</span></div>
</div>
</div>
</body>
</html>
uj5u.com熱心網友回復：
你這個DIV已經換行了。不行。日期 標題 內容 要在同1行。
uj5u.com熱心網友回復：
因為上面日期也是一個行內元素啊 ，建議你去看看行內元素，行內塊元素，塊級元素的特性
uj5u.com熱心網友回復：
加<br>標簽就行uj5u.com熱心網友回復：
盒子模型呀，用連個并列的盒子模型uj5u.com熱心網友回復：
<span style="display: block;"></span>給元素樣式添加display: block，這個元素就可以占用一行了，自然也就換行了
uj5u.com熱心網友回復：
樓主的選擇也行，用table把日期、測驗標題、測驗內容做成三列。
uj5u.com熱心網友回復：
<br>shishiuj5u.com熱心網友回復：
方式一：<br/> br元素有換行的功能方式二：給span標簽添加樣式display:block; span是行內標簽，寬度又內容撐開，對應的默認樣式是display:inline
方式三：通過塊級標簽實作，無論是你把span換成p還是用p包裹span都可以實作效果
uj5u.com熱心網友回復：
把倆span前面的div設定一個float:left然后把倆span使用一個div包裹起來
這樣就方便設定統一的左邊距了 比如離日期的距離
uj5u.com熱心網友回復：
不要寫行內樣式，首先給你父元素 設定個class名，
<div v-for="todo in updateDatas" :key="todo" class="boxCard">
<span >{{todo.createTime}}  </span>
<span style="overflow-wrap:break-word;">{{ todo.title }}: {{ todo.content }}</span>
</div>
css代碼
.boxCard{
display:flex;
flex-direction: column;
color: #666 ;
margin-top: 5px;
text-align: left;
margin-left: 30px;
}
//你還可以給你span設定內容過長時 單行自動換行 設定超過多少行后省略號顯示不在換行具體步驟可以看我的這篇文章
如果時你現在的情況 span可以這么設定自動換行
.boxCard span{
word-wrap: break-word;/*自動換行*/
text-overflow: ellipsis;/*超出部分省略號顯示*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;/*自動換行后，多行顯示，設定多少行后不在換行而是省略號顯示*/
overflow: hidden;
}
https://blog.csdn.net/qq_41791303/article/details/107022397
最后 千萬別養成寫行內樣式的習慣,這樣你如果作業后還沒改掉你會被罵的，行內樣式不好維護修改的，
最后學一下flex布局把，自適應，如果你會了，你寫靜態頁面的速度會很快。
uj5u.com熱心網友回復：
記得設定 寬度.boxCard span {
width:500px //看你個人實際需求 我這里只是寫個數字參考
因為你 下面的自動換行需要元素的寬度來做參考，超過元素的寬度就會自動換行。
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/32095.html
標籤：HTML(CSS)