61,128
社区成员
发帖
与我相关
我的任务
分享两个并列的标签怎么分别换行？
<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>
图示效果
<span >{{todo.createTime}} </span>
<span style="overflow-wrap:break-word;">{{ todo.title }}: {{ todo.content }}</span>
</div>
图示效果
...全文
请发表友善的回复…
发表回复
凡尘向天 2020-07-04
- 打赏
- 举报
记得设置 宽度
.boxCard span {
width:500px //看你个人实际需求 我这里只是写个数字参考
因为你 下面的自动换行需要元素的宽度来做参考，超过元素的宽度就会自动换行。
}
凡尘向天 2020-07-04
- 打赏
- 举报
不要写行内样式，
首先给你父元素 设置个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布局把，自适应，如果你会了，你写静态页面的速度会很快。
浴火_凤凰 2020-06-29
- 打赏
- 举报
把俩span前面的div设置一个float:left
然后把俩span使用一个div包裹起来
这样就方便设置统一的左边距了 比如离日期的距离
那谁呀撒 2020-06-28
- 打赏
- 举报
方式一：<br/> br元素有换行的功能
方式二：给span标签添加样式display:block; span是行内标签，宽度又内容撑开，对应的默认样式是display:inline
方式三：通过块级标签实现，无论是你把span换成p还是用p包裹span都可以实现效果
方式二：给span标签添加样式display:block; span是行内标签，宽度又内容撑开，对应的默认样式是display:inline
方式三：通过块级标签实现，无论是你把span换成p还是用p包裹span都可以实现效果
暖一杯茶-- 2020-06-24
- 打赏
- 举报
<br>shishi
kmokd 2020-06-22
- 打赏
- 举报
你这个我没试过，我最后问题解决了。我是用table标签。[/quote]
楼主的选择也行，用table把日期、测试标题、测试内容做成三列。
chinaskysun 2020-06-21
- 打赏
- 举报
<span style="display: block;"></span>
给元素样式添加display: block，这个元素就可以占用一行了，自然也就换行了
weixin_45916469 2020-06-20
- 打赏
- 举报
盒子模型呀，用连个并列的盒子模型
black_3 2020-06-20
- 打赏
- 举报
加<br>标签就行
sha虫剂 2020-06-11
- 打赏
- 举报
你这样会把日期独立成一行。[/quote]
因为上面日期也是一个行内元素啊 ，建议你去看看行内元素，行内块元素，块级元素的特性
Salted-fish 2020-06-10
- 打赏
- 举报
就是内测内容换行的时候，不要让内容超过测试标题。不要跟日期对齐
Salted-fish 2020-06-10
- 打赏
- 举报
你这个DIV已经换行了。不行。日期 标题 内容 要在同1行。
usecf 2020-06-10
- 打赏
- 举报
<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>
Salted-fish 2020-06-10
- 打赏
- 举报
你这个我没试过，我最后问题解决了。我是用table标签。
Salted-fish 2020-06-10
- 打赏
- 举报
你这样会把日期独立成一行。
Salted-fish 2020-06-10
- 打赏
- 举报
你这个float我也试过。单行还可以。for循环多行的话。数据全乱了。
不会么么哒 2020-06-10
- 打赏
- 举报
看了回复，挺无语的 1.变成块元素，css设置：display：block
2.外层加一个p标签或者div标签等块元素
3.你可以直接用p标签
sha虫剂 2020-06-10
- 打赏
- 举报
或者直接把span转换为行内块元素，设置css display: inline-block; 然后给个宽度
sha虫剂 2020-06-10
- 打赏
- 举报
布局问题 把两个span的内容单独用盒子包起来 而不是直接扔俩span
usecf 2020-06-10
- 打赏
- 举报
<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>
