css 包含长文本的宽度为100%的Div采用全窗口宽度代替全可用空间宽度[已关闭]

zmeyuzjn 于 12个月前发布在其他

关注(0)|答案(1)|浏览(117)

**已关闭。**此问题需要debugging details。它目前不接受回答。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答这个问题。
昨天关门了。
Improve this question
这里有一个简单的网页：https://jsfiddle.net/enxgz2Lm/1/
它分为side menu和tasks container。
tasks container包含一个row container，它被分为checkbox，title在左边，details在右边。
关于title的问题
这个元素是可编辑的（使用contenteditable=“true”），我希望它是这样的，而不是使用input标签的原因。我希望它采取100%的自由空间，如果文本比自由空间长，它应该显示一部分的文字填补自由空间和隐藏其余（不打破成新的行）。
正如你在我提供的网页中看到的，我能够做我需要的，但问题是，我不知道如何保持title的宽度为100%的可用空间。

PS：如果你取消注解CSS line width：470px 你可以看到网页应该是什么样子大约

css

来源：https://stackoverflow.com/questions/77319091/div-with-width-100-containing-long-text-takes-full-window-width-inplace-of-full

1条答案

按热度按时间

8yoxcaq71#

首先添加.side-menu-container { flex: none; }（或min-with:150px）。
其次，添加.tasks-contianer { flex: auto; }而不是width: 100%;为了防止拉伸，您需要添加.tasks-contianer { min-width: 0; }（或overflow: hidden）：

* {
  box-sizing: border-box;  
}

body {
  display: flex;
  margin: 0;
  height: 100vh;
}

.side-menu-container {
  width: 150px;
  height: 100%;
  background-color: lightblue;
  padding-left: 15px;
  flex: none;
}

.tasks-contianer {
  padding: 10px;
  background-color: #161A1F;
  flex: auto;
  min-width: 0;
}

.task-container {
  display: flex;
  align-items: center;
  height: 40px;
  background-color: lightgray;
  padding: 0 10px;
}

.checkbox-container {
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.details-container {
  padding-left: 10px;
  color: red;
}

.title-container {
 overflow: hidden;
}

.title-container p {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis; /* optional */
}

[contenteditable] {
  outline: 0px solid transparent;
}

<div class="side-menu-container">
  <p>Category1</p>
  <p>Category2</p>
  <p>Category3</p>
</div>
<div class="tasks-contianer">
  <div class="task-container">
    <div class="checkbox-container">
      <input type="checkbox" />
    </div>
    <div class="title-container" contenteditable="true"><p>veryLongTextWithNoSpaceveryLongTextWithNoSpaceveryLongTextWithNoSpaceveryLongTextWithNoSpaceveryLongTextWithNoSpaceveryLongTextWithNoSpaceveryLongTextWithNoSpace
    </p>
    </div>
    <div class="details-container">
      <p>details</p>
    </div>
  </div>
</div>

赞(0）回复(0）举报 12个月前

我来回答

css 包含长文本的宽度为100%的Div采用全窗口宽度代替全可用空间宽度[已关闭]

1条答案

相关问题

热门标签

最新问答