css Flex显示中溢出长文本，并创建水平滚动条

qfe3c7zg  于 2023-05-08  发布在  其他
关注(0)|答案(3)|浏览(170)

我正在创建一个待办事项列表项目，每个待办事项包括标题和正文以及两个用于编辑和删除的链接。当标题和正文段落的长度较大时，我希望有一个特定的宽度，当段落的长度大于该值时，段落的其余部分应该转到下一行，页面不应该水平滚动，段落不应该从Flex容器溢出。

* {
    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/bootstrap@5.3.0-alpha3/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>

我试图修复段落的宽度，但它使水平滚动条！

css

3条答案

按热度按时间
5t7ly7z5

5t7ly7z51#

试试这个：

* {
    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;
}
.task_body{
    word-break: break-all;
}
<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/bootstrap@5.3.0-alpha3/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>

Learn more about word-break CSS property。
希望你觉得这有用！

赞(0）分享  回复(0）举报  2023-05-08
waxmsbnn

waxmsbnn2#

为了防止在标题和正文段落的长度很长时出现水平滚动条，可以在**.task_title和.task_body元素**上使用CSS world-wrap属性设置为break-word。如果文本超过元素的宽度，这将打断长单词并将其换行到下一行。

.task_title, .task_body {
  width: 100%;
  word-wrap: break-word;
}
赞(0）分享  回复(0）举报  2023-05-08
dzhpxtsq

dzhpxtsq3#

你只需要添加flex-wrap，然后在task_body中添加word-break或text-align

* {
    box-sizing: border-box;
}

ul {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

li {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; //add
    width: 50%;
    height: fit-content;
    border: solid 2px black;
    border-radius: 5px;
    margin-bottom: 0.5rem;
    padding: 1rem;
}

.task_title, .edit_delete {
    display: flex;
    align-items: center;
}
li .task_body{ // add
  text-align: justify;
  word-break: break-all;
}
<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/bootstrap@5.3.0-alpha3/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>
赞(0）分享  回复(0）举报  2023-05-08
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com