gpt4 book ai didi

html - CSS |如何在高度设置为 30px 的 div 中 overflow hidden

转载 作者:太空宇宙 更新时间:2023-11-04 08:58:25 26 4
gpt4 key购买 nike

我有一个页面,我想在 div 中显示歌曲标题,高度设置为 30px如果文件标题较长,则 div 会溢出。我只想隐藏用于该文件标题的粉红色 下划线。屏幕截图将描述更多。

工作:如下图所示。参见 下载 Jazzy B mp3 歌曲 Billo Tera Jatt

[![在这里工作正常][1]][1]

不工作。参见 下载 Nimrat Khaira 的 mp3 歌曲 Dubai Wale Shaikh (Manje Bistre) 和粉色下划线。

[![不工作时看起来像这样][2]][2]

CSS 代码

.title_1 {
height:30px;
margin-top:6px;
clear: both;
padding-top: 5px;
background: #33a6cf;
padding-right: 10px;
-webkit-box-sizing: border-box;
border-bottom: 2px solid #B0B0B0;
color:#fff;

}
.title_1 .title_txt {
font-size: 12px;
border-bottom: 2px solid #FF007F;
padding: 0px 10px 9px 10px;
color: #fff;
font-weight: 700;

页面代码

 <div class="title_1"><span class="title_txt">Download <?=$getfile['name'].' by '.$Artist_Name[0]?> <?=$getfile['ext']?> Song</span></div>

我希望显示更长的标题,如第一个屏幕截图所示。

最佳答案

您可以使用下一个解决方案:

<!DOCTYPE html>
<html>
<head>
<title>Game</title>
<style type="text/css">
.container {
width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background: red;
}
</style>
</head>

<body>
<div class="container">Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
</body>
</html>
  • white-space: nowrap; - 使您的文本始终只有一行。
  • text-overflow: ellipsis; - 当它溢出其容器时在行尾的那些“...”。
  • overflow: hidden; - 如果您希望之前的属性正常工作,则需要添加此属性。

如果需要,您可以省略 text-overflow: ellipsis;

关于html - CSS |如何在高度设置为 30px 的 div 中 overflow hidden ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42948137/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com