大佬教程收集整理的这篇文章主要介绍了如何格式化聊天应用以显示侧边栏的省略号，并在点击后保持每个 div 突出显示？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在构建一个 HTML 聊天应用模板，但在尝试完成时遇到了两个主要问题。
text-overflow: ellipse;，但旁边的聊天名称没有显示省略号这是我的 HTML 和 CSS：
body{
background-image: url("../img/gradIEntBackgroundOne.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.wrapper{
display: grID;
grID-template-columns: 1fr 2fr;
wIDth: 85vw;
height: 80vh;
margin: auto;
margin-top: 2%;
}
/*
* This section will style the sIDebar,which will contain all of the users chats that they're in
*
*/
.sIDebar{
display: grID;
grID-template-rows: 80px 60vh auto;
background-color: purple;
}
.sIDebar > .chats-Title{
background-color: violet;
}
.sIDebar > .group-chats{
overflow-y: auto;
background-color: white;
}
.sIDebar > .group-chats > .group-chat-name{
padding: 15px;
background-color: chocolate;
border: 1px solID black;
overflow: hIDden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sIDebar > .group-chats > div:hover{
background-color:burlywood;
}
.sIDebar > .group-chats > div:active{
background-color:rgb(122,184,235);
}
.sIDebar > .add-new-chat{
background-color: turquoise;
}
/**************************************/
/* END OF SIDE bar STYliNG! */
/**************************************/
/*
* This section will style the chat,which will contain all of the users messages that they're in
*
*/
.chat-container{
display: grID;
grID-template-rows: 1fr 8fr auto;
}
.chat-container > .chat{
background-color: red;
}
.chat-container > .message-container{
display: grID;
grID-template-columns: 5% auto;
}
.chat-container > .chat-Title{
display: grID;
background-color: chartreuse;
border: 2px solID black;
}
.chat-container > .message-container > .image-bk{
display: grID;
background-color: blue;
}
.chat-container > .chat-Title > .Title-text{
color: white;
margin-left: 0px;
margin: auto;
}
/**************************************/
/* END OF CHAT STYliNG! */
/**************************************/
/* Icon styling */
i{
margin: auto;
/* Font-size: 1.6rem; */
color: rgb(240,240,240);
}<!DOCTYPE HTML>
<HTML lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0">
<link rel="shortcut icon" href="../static/img/fav.png" type="image/x-icon">
<link rel="stylesheet" href="../static/CSS/example.CSS">
<link rel="stylesheet" href="https://cdn.Jsdelivr.net/npm/bootstrap-icons@1.3.0/Font/bootstrap-icons.CSS">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/CSS/bootstrap.min.CSS" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<Title>document</Title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Mini-Messenger</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" ID="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">DM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Message History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log Out</a>
</li>
</ul>
</div>
</nav>
<div class="wrapper">
<div class="sIDebar">
<div class="chats-Title">
<h1>Chats</h1>
</div>
<div class="group-chats">
<div class="group-chat-name">
<div> <b>L.R.D.D </b> </div>
<div>Luis: They weren't fresh,but boy they were high quality</div>
</div>
<div class="group-chat-name">
<div> <b>Munckin and Me!</b> </div>
<div>Denise: hey DD</div>
</div>
<div class="group-chat-name">
<div> <b>The boiz</b></div>
<div>vincent: Hehehe Steve dumb hehehe</div>
</div class="group-chat-name">
<div class="group-chat-name">
<div> <b>Example2</b> </div>
<div> Fred: I am fred,look at me! </div>
</div>
<div class="group-chat-name">
<div> <b>Example3</b> </div>
<div>Mark: Woah dude,farizzle! </div>
</div>
<div class="group-chat-name">
<div> <b>Magical School Bus </b> </div>
<div>Arthur: Oh dear god,Please let this be a normal fIEld trip! :( </div>
</div>
</div>
<div class="add-new-chat">
<h3>Add new chat!</h3>
</div>
</div>
<div class="chat-container">
<div class="chat-Title">
<div class="Title-text">
<b>L.R.D.D </b>
</div>
</div>
<div class="chat">
</div>
<div class="message-container">
<div class="image-bk">
<i class="bi bi-image"></i>
</div>
<form>
<input type="text" class="form-rounded form-control form-control-md" required name="send-message" placeholder="Send message" aria-label="RecipIEnt's username" aria-describedby="basic-addon2">
</form>
</div>
</div>
</div>
</body>
</HTML>
我该怎么办？谢谢。
您可能必须使用 javascript 来实现这一点。 :active 状态的默认功能是在您单击并释放鼠标按钮后立即返回 :hover 状态。
.sidebar > .group-chats > div:active {
background-color: red;
}
如果您删除 :hover 状态，您将使其保持红色，但就我而言，只要 :hover 在点击完成后立即接管，就不可能保持 :active 状态。
body{
background-image: url("../img/gradientBackgroundOne.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr;
width: 85vw;
height: 80vh;
margin: auto;
margin-top: 2%;
}
/*
* This section will style the sidebar,which will contain all of the users chats that they're in
*
*/
.sidebar{
display: grid;
grid-template-rows: 80px 60vh auto;
background-color: purple;
}
.sidebar > .chats-title{
background-color: violet;
}
.sidebar > .group-chats{
overflow-y: auto;
background-color: white;
}
.sidebar > .group-chats > .group-chat-name{
padding: 15px;
background-color: chocolate;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sidebar > .group-chats > div:hover{
background-color:burlywood;
}
.sidebar > .group-chats > div:active,.sidebar > .group-chats > div:focus {
background-color: red;
}
.sidebar > .add-new-chat{
background-color: turquoise;
}
/**************************************/
/* END OF SIDE BAR STYLING! */
/**************************************/
/*
* This section will style the chat,which will contain all of the users messages that they're in
*
*/
.chat-container{
display: grid;
grid-template-rows: 1fr 8fr auto;
}
.chat-container > .chat{
background-color: red;
}
.chat-container > .message-container{
display: grid;
grid-template-columns: 5% auto;
}
.chat-container > .chat-title{
display: grid;
background-color: chartreuse;
border: 2px solid black;
}
.chat-container > .message-container > .image-bk{
display: grid;
background-color: blue;
}
.chat-container > .chat-title > .title-text{
color: white;
margin-left: 0px;
margin: auto;
}
/**************************************/
/* END OF CHAT STYLING! */
/**************************************/
/* Icon styling */
i{
margin: auto;
/* font-size: 1.6rem; */
color: rgb(240,240,240);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="../static/img/fav.png" type="image/x-icon">
<link rel="stylesheet" href="../static/css/example.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Mini-Messenger</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">DM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Message History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log Out</a>
</li>
</ul>
</div>
</nav>
<div class="wrapper">
<div class="sidebar">
<div class="chats-title">
<h1>Chats</h1>
</div>
<div class="group-chats">
<div class="group-chat-name">
<div> <b>L.R.D.D </b> </div>
<div>Luis: They weren't fresh,but boy they were high quality</div>
</div>
<div class="group-chat-name">
<div> <b>Munckin and Me!</b> </div>
<div>Denise: Hey DD</div>
</div>
<div class="group-chat-name">
<div> <b>The boiz</b></div>
<div>Vincent: Hehehe Steve dumb hehehe</div>
</div class="group-chat-name">
<div class="group-chat-name">
<div> <b>Example2</b> </div>
<div> Fred: I am fred,look at me! </div>
</div>
<div class="group-chat-name">
<div> <b>Example3</b> </div>
<div>Mark: Woah dude,farizzle! </div>
</div>
<div class="group-chat-name">
<div> <b>Magical School Bus </b> </div>
<div>Arthur: Oh dear god,Please let this be a normal field trip! :( </div>
</div>
</div>
<div class="add-new-chat">
<h3>Add new chat!</h3>
</div>
</div>
<div class="chat-container">
<div class="chat-title">
<div class="title-text">
<b>L.R.D.D </b>
</div>
</div>
<div class="chat">
</div>
<div class="message-container">
<div class="image-bk">
<i class="bi bi-image"></i>
</div>
<form>
<input type="text" class="form-rounded form-control form-control-md" required name="send-message" placeholder="Send message" aria-label="Recipient's username" aria-describedby="basic-addon2">
</form>
</div>
</div>
</div>
</body>
</html>
编辑：忘记您的省略号问题。为此，您的元素必须具有宽度。但是，我无法解决它，您的标记和 css 令人困惑，并且向我认为正确的元素添加宽度不起作用。
编辑 2：您可以尝试这样的 JS 解决方案，当您单击聊天室 div 时，使活动背景颜色保持不变。我已经简化了。您可以将其更改为使用您已经拥有的容器类，只需向其中要使用此 JS 的所有 div 添加一个唯一的类：
const container = document.querySelector('.container')
const activeState = (e) => {
document.querySelectorAll('.active-color').forEach(link => link.classList.remove('clicked-color'))
if (e.target.className.toLowerCase() === 'active-color' )
e.target.classList.add('clicked-color')
}
container.addEventListener('click',(e) => {
activeState(e)
})div.active-color {
padding: 2rem;
width: 300px;
background: #ddd;
margin: 1rem 0;
border-radius: 6px;
}
div.active-color:hover,div.active-color:focus {
background: purple;
cursor: pointer;
}
div.active-color:active {
background: red;
}
div.active-color.clicked-color {
background: red;
}<div class="container">
<div class="active-color">DIV 1</div>
<div class="active-color">DIV 2</div>
<div class="active-color">DIV 3</div>
<div class="active-color">DIV 4</div>
</div>以上是大佬教程为你收集整理的如何格式化聊天应用以显示侧边栏的省略号，并在点击后保持每个 div 突出显示？全部内容，希望文章能够帮你解决如何格式化聊天应用以显示侧边栏的省略号，并在点击后保持每个 div 突出显示？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。