Adjustable-width div contained within a static-width div

Question

Adjustable-width div contained within a static-width div

Context: (summarized)

<div style="width:300px;" >
    <img src="blabla..." />
    <div style="oveflow:hidden; etc..." >
        description
    </div>
</div>

Issue:
The challenge arises when the description is too long and gets cut off due to "overflow:hidden;" property. To resolve this, a CSS animation triggers on hover, shifting the description by "margin-left:-200px;", enabling users to view the complete text gradually.
However, adjusting the margin left by -200px is not always sufficient or can even be excessive depending on the length of the description.

Possible Solutions:
1)

Javascript/jQuery

My website operates without JavaScript, hence I prefer a JS-free approach. While there are various JS solutions available online, I aim to tackle this issue purely with CSS.

2)

<marquee>description</marquee>

This method is outdated.

Alternative Approaches:
One idea involves implementing PHP code to calculate the length of the description dynamically and set the margin-left accordingly. However, this may lead to a convoluted PHP file bypassing the simplicity of using CSS stylesheets. Are there any CSS3 techniques that address this issue? Despite encountering similar challenges among designers, no definitive solution has been found through CSS3 features. Is this limitation within the scope of CSS language?
Thank you.

PS: The description should strictly occupy 1 line. No line breaks, scrollbars, or "show more" buttons permitted.

html css

Answer 1

Answer №1

One option is to utilize the PHP echo function with the <br/> tag to create line breaks at specific intervals.
Alternatively, you can employ CSS and specify a maximum width using the max-width property to constrain the content within a certain limit.

Answer 2

One option is to utilize the PHP echo function with the <br/> tag to create line breaks at specific intervals.
Alternatively, you can employ CSS and specify a maximum width using the max-width property to constrain the content within a certain limit.

Answer 3

Answer №2

http://www.example.com/css/styles/word-wrap-demo

div.content {
word-wrap: break-word;
}

Does this meet your requirements?

Answer 4

http://www.example.com/css/styles/word-wrap-demo

div.content {
word-wrap: break-word;
}

Does this meet your requirements?

Answer 5

Answer №3

Here is my best attempt at the solution.

I do have a slight concern that the slide may end with the description hidden, but I believe it's a minor issue compared to the overall criteria being met.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrap {
  width: 300px;
  margin: 1em auto;
  border:1px solid green;
  display: flex;
  flex-direction: column;
}

.wrap img {
  max-height:100%;
  width: auto;
}

.desc {
  width: 300px;
  height: 15px;
  white-space:nowrap;
  overflow: hidden;
  font-size:13px;
  line-height: 15px;
  position: relative;
}
.wrap .desc p{
  position: absolute;
  transform: translateX(0);
  transition: transform 5s ease;
}

.wrap:hover .desc p{
  transform: translateX(-100%);
}

<div class="wrap" >
  <div class="image">
    <img src="http://lorempixel.com/output/abstract-q-c-300-300-10.jpg" alt="" />
  </div>
    <div class="desc" >
        <p>Tri-tip shank turkey chuck, porchetta drumstick andouille beef ribs prosciutto salami beef. Ham hock pork belly pig pastrami. </p>
    </div>
</div>

Check out the Codepen Demo here

Answer 6

Here is my best attempt at the solution.

I do have a slight concern that the slide may end with the description hidden, but I believe it's a minor issue compared to the overall criteria being met.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrap {
  width: 300px;
  margin: 1em auto;
  border:1px solid green;
  display: flex;
  flex-direction: column;
}

.wrap img {
  max-height:100%;
  width: auto;
}

.desc {
  width: 300px;
  height: 15px;
  white-space:nowrap;
  overflow: hidden;
  font-size:13px;
  line-height: 15px;
  position: relative;
}
.wrap .desc p{
  position: absolute;
  transform: translateX(0);
  transition: transform 5s ease;
}

.wrap:hover .desc p{
  transform: translateX(-100%);
}

<div class="wrap" >
  <div class="image">
    <img src="http://lorempixel.com/output/abstract-q-c-300-300-10.jpg" alt="" />
  </div>
    <div class="desc" >
        <p>Tri-tip shank turkey chuck, porchetta drumstick andouille beef ribs prosciutto salami beef. Ham hock pork belly pig pastrami. </p>
    </div>
</div>

Check out the Codepen Demo here

Answer 7

Answer №4

One solution I recommend is setting fixed dimensions for the description container and implementing the CSS attribute overflow-y:auto.

The standard scrollbar can vary in appearance across different web browsers, so you might consider using a JavaScript plugin. However, if you prefer not to introduce additional libraries for a simple task, sticking with CSS may be the way to go.:)

Answer 8

One solution I recommend is setting fixed dimensions for the description container and implementing the CSS attribute overflow-y:auto.

The standard scrollbar can vary in appearance across different web browsers, so you might consider using a JavaScript plugin. However, if you prefer not to introduce additional libraries for a simple task, sticking with CSS may be the way to go.:)

Answer 9

Answer №5

Give this a try:

div.solution {
        white-space: nowrap; 
        width: 12em; 
        overflow: hidden; 
        height:30px;   
    }
    div.solution:hover {
        text-overflow: inherit;
        overflow: visible;
    }

    <p>Hover over the two divisions below to reveal the complete text.</p>

    <div class="solution" style="text-overflow:ellipsis;">This is a lengthy piece of text that won't fit in the container. This is a long text snippet that will not fully display within the boundaries.This is a long text snippet that will not fully display within the boundaries.This is a long text snippet that will not fully display within the boundaries.This is a long text snippet that will not fully display within the boundaries</div>
    <br>
    <div class="solution" style="text-overflow:clip;">This is some lengthy content that exceeds the box size.</div>

Answer 10

Give this a try:

div.solution {
        white-space: nowrap; 
        width: 12em; 
        overflow: hidden; 
        height:30px;   
    }
    div.solution:hover {
        text-overflow: inherit;
        overflow: visible;
    }

    <p>Hover over the two divisions below to reveal the complete text.</p>

    <div class="solution" style="text-overflow:ellipsis;">This is a lengthy piece of text that won't fit in the container. This is a long text snippet that will not fully display within the boundaries.This is a long text snippet that will not fully display within the boundaries.This is a long text snippet that will not fully display within the boundaries.This is a long text snippet that will not fully display within the boundaries</div>
    <br>
    <div class="solution" style="text-overflow:clip;">This is some lengthy content that exceeds the box size.</div>

Adjustable-width div contained within a static-width div

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Fixed position does not adjust based on the screen resolution

Creating three select tags using PHP and Ajax

Using jQuery .animate() leading to erratic input movements

Guide to utilizing JavaScript for a basic gaming experience

What could be causing the vertical alignment issue of this logo in its parent container?

Gather numerical data from an iframe and calculate the total of all the numbers

The website is experiencing crashes in IE11 whenever the developer tools are closed

What is preventing me from clicking on the left side of the link on this CSS flip card while using Chrome browser?

Align an element to the right side of the webpage using CSS

Having trouble retrieving JSON data from the open weather API

Accessing an HTML DOM element and assigning it to the value of an input tag

Javascript code fails to execute properly on IE8

What is the best way to make a DIV box span the entire webpage without overflowing to the left?

The issue of the back button not functioning in the React Multi-level push menu SCSS has

Steps for sending data to a modal window

When the user clicks, automatically direct them to a different webpage

Adjust `theme-color` as the class and theme of the page are switched

How can I access the value of a textbox located in the footer row of a gridview control using JavaScript?

Unable to resolve the problem related to <ul> and <li>

The desired outcome is not showing up as expected in the HTML coding