[英]Prevent wrapping of floated span element with CSS
我在<h3>
中有一个跨度,一旦文本太长,该跨度将换行到下一行。 我需要描述文字全部都放在.title
和overflow:hidden
的第一行。 说明应右对齐,标题应左对齐。
在整个应用程序中都使用了这种设计模式,因此更改html元素本身是不得已的选择。 如果可能的话,我想用一个简单的CSS解决方案来解决这个问题。 我一直在尝试overflow
, text-overflow
和white-space
所有组合,这些都是我想不到的。 谢谢!
.title { background-color: lightblue; color: green; } .description { float: right; font-weight: bold; color: black; }
Long: <div class="container"> <h3 class="title"> title <span class="description"></span> </h3> </div> <br> Short: <div class="container"> <h3 class="title"> title <span class="description">description</span> </h3> </div>
您可以将.title
设置为white-space:nowrap
+ display:table
。
.title {
white-space: nowrap;
display: table;
}
.title { background-color: lightblue; color: green; white-space: nowrap; display: table; } .description { font-weight: bold; color: black; }
Long: <div class="container"> <h3 class="title"> title <span class="description"></span> </h3> </div> <br> Short: <div class="container"> <h3 class="title"> title <span class="description">description</span> </h3> </div>
编辑1:如果要隐藏多余的文本,可以使用white-space:nowrap
+ overflow:hidden
。
.title { background-color: lightblue; color: green; white-space: nowrap; overflow: hidden; } .description { font-weight: bold; color: black; }
Long: <div class="container"> <h3 class="title"> title <span class="description"></span> </h3> </div> <br> Short: <div class="container"> <h3 class="title"> title <span class="description">description</span> </h3> </div>
编辑2:如果您需要短文本来扩展和匹配长文本而没有隐藏文本,则可以使用white-space:nowrap
+ display:table-row
。 请注意,需要稍微调整标记-将两个容器合并为一个。
.title { background-color: lightblue; color: green; white-space: nowrap; display: table-row; } .description { font-weight: bold; color: black; }
<div class="container"> <h3 class="title"> title <span class="description"></span> </h3> <h3 class="title"> title <span class="description">description</span> </h3> </div>
overflow: hidden;
仅当div具有设定的宽度时才起作用。 您可以将div上的宽度设置为100vw或设置px数量,然后可以使用white-space: nowrap;
和“溢出:隐藏;”在一起。
.title {
background-color: lightblue;
color: green;
width: 100vw;
overflow: hidden;
white-space: nowrap;
}
.description {
font-weight: bold;
color: black;
}
Pangloss使我走上了正确的道路,这是最终为我工作的CSS。
.description {
text-align: right;
width:100%;
overflow:hidden;
font-weight: bold;
color:black;
}
.container {
}
.title {
background-color:lightblue;
color:green;
display:flex;
white-space:nowrap;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.