A div element set to a width of 100% that holds a lengthy text will expand to the entire width of the window,

Question

A div element set to a width of 100% that holds a lengthy text will expand to the entire width of the window,

Check out this simple webpage: https://jsfiddle.net/enxgz2Lm/1/

The webpage is structured with a side menu and a tasks container.

Within the tasks container, there is a row container that includes a checkbox, title on the left, and details on the right.

I'm specifically inquiring about the editable title element.

The title element has the attribute contenteditable="true". I want it to expand to occupy 100% of the available space. If the text exceeds the available space, I would like it to display partially and hide the rest without wrapping into new lines.

In the provided webpage, you can see that I achieved most of what I wanted. However, I'm struggling to maintain the width of the title at 100% of the available space.

Note: If you uncomment the CSS line "width: 470px", you'll get an idea of how the final webpage should look.

html css

Answer 1

Answer №1

To start, include the CSS rule

.side-menu-container { flex: none; }

(or min-with:150px).
Next, replace width: 100%; with .tasks-contianer { flex: auto; } and to avoid stretching, ensure you add

.tasks-contianer { min-width: 0; }

(or 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>

Answer 2

To start, include the CSS rule

.side-menu-container { flex: none; }

(or min-with:150px).
Next, replace width: 100%; with .tasks-contianer { flex: auto; } and to avoid stretching, ensure you add

.tasks-contianer { min-width: 0; }

(or 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>

A div element set to a width of 100% that holds a lengthy text will expand to the entire width of the window,

Answer №1

Similar questions

What is the best way to arrange a number of inline-block elements with equal size in a vertical alignment?

Tips for displaying a loading indicator above a form

Steps for generating an HTML button when an Angular function evaluates to true

Deciding between Document.createElement() and Document.createTextNode() in Javascript

The footer navigation in CSS shifts position when it is hovered over

Tips for preventing page breaks (when printing or saving as a PDF) in lengthy HTML tables

How do I use jQuery to animate a height increase where the added height is applied to the top of the element?

Ways to categorize items using JQuery based on their hierarchical structure

Unable to view numbers on iPhone or ios device

The clash of interests between jQuery and Bootstrap

How can I delete a hyperlink on a number from my iPhone or iPad?

Retrieve the current height of the iFrame and then set that height to the parent div

How to harness the power of loops in JavaScript

Challenges in using HAML5 Canvas for mathematical applications

Having difficulty converting the string data to HTML using JavaScript in a Node.js Express application

Is it possible for a website to instruct a user's browser to save the entire page locally?

I am encountering issues with my XPath in certain scenarios

Utilizing Ruby interpolation to dynamically select elements in Capybara's CSS selectors

AngularJS - displaying a notification when the array length is empty and customizing the visibility to conceal the default action

What is the difference in speed between drawing on a transparent canvas and determining if a point is transparent compared to determining if a point is within a complex polygon?