I am creating a to do list project, each to do includes title and body and two links for edit and delete. I want to have a specific width when the length of the title and body paragraph is large, and when the length of the paragraph is greater than that value, the rest of the paragraph should go to the next line, and the page should not be scrolled horizontally and the paragraph not overflowed from flex container.
* {
box-sizing: border-box;
}
ul {
display: flex;
flex-direction: column-reverse;
align-items: center;
}
li {
display: flex;
justify-content: space-between;
width: 50%;
border: solid 2px black;
border-radius: 5px;
margin-bottom: 0.5rem;
padding: 1rem;
}
.task_title, .edit_delete {
display: flex;
align-items: center;
}<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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/fontawesome.min.css">
<link rel="stylesheet" type="text/css" href="/static/task_list_detail.css">
<title> </title>
<style>
.content {
padding: 1rem;
margin-bottom: 1rem;
background-color: rgb(255, 255, 255);
}
body {
margin: 0;
}
</style>
</head>
<body>
<div>
<h1>education Hello akbar</h1>
<ul class="task_list_item">
<li>
<div class="task_title">
second task
</div>
<div class="task_body">
i am the second task in the daily task of the year
</div>
<div class="edit_delete">
<a href="/task/6/edit/">Edit</a>
<a href="/task/6/delete/">Delete</a>
</div>
</li>
<li>
<div class="task_title">
aaaaaaaaaaaaaaaaaaaa
</div>
<div class="task_body">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="edit_delete">
<a href="/task/9/edit/">Edit</a>
<a href="/task/9/delete/">Delete</a>
</div>
</li>
</ul>
<a href="/task_list/3/task/new/">New Task</a>
<form action="/task_list/3/delete/" method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="docYldWvWQDsXMFO2YWgXTN5L715snVLEopu6GXrU6mpDFKwlQZGJ3aRn6LJoxW8">
<input type="submit" value="Delete Task List">
</form>
</div>
</body></html>i tried to fix the width of the paragraph but it makes horizontal scroll bar!
3
Answers
To prevent the horizontal scrollbar from appearing when the length of the title and body paragraphs is large, you can use the CSS word-wrap property set to break-word on the .task_title and .task_body elements. This will break long words and wrap the text onto the next line if it exceeds the width of the element.
Try this:
Learn more about
word-breakCSS property.Hope you find this useful!
you need just add flex-wrap and In task_body add word-break or text-align