how to make a heading always stay horizontal inplace of overflow

user_14955049 0
Viewed 36

I am working on a portfolio project and I am creating the projects section. The width of the projects section is around 350px so only some of the title could be visible but if the text is not able to fit in 350 px it is making the text overflow vertically but I want it to overflow horizontally.

here is my HTML&CSS:

.project-container {
    display: grid;
    height: 350px;
    width: 350px;
    background: #c4c4c4;
    margin-bottom: 3%;
}

.project-title{
    height: 45px;
    width: 100%;
    background-color: red;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}
<div class="project-container">
    <h1 class="project-title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores dignissimos praesentium dolorem saepe velit at libero a consectetur atque molestias.</h1>
</div>

and here is my result when the text can't fit in 350px:

enter image description here

but I want the overflow to be horizontal

css
3 Answers

You've given your .project-title a width which automatically means the text inside will wrap at the end of the line. If you want it to overflow horizontally instead of vertically, you need to:

  1. Allow space for it to overflow.
  2. Prevent it from wrapping.

This can be achieved by changing .project-title[width] to .project-title[min-width] (meaning the space is at least the width of the container, but may be larger) and setting .project-title[white-space]=nowrap (meaning text is not allowed to break across lines).

.project-container {
    display: grid;
    height: 350px;
    width: 350px;
    background: #c4c4c4;
    margin-bottom: 3%;
}

.project-title{
    height: 45px;
    min-width: 100%;
    white-space: nowrap;
    background-color: red;
    margin: 0;
    display: flex;
    overflow: auto;
}
<div class="project-container">
    <h1 class="project-title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores dignissimos praesentium dolorem saepe velit at libero a consectetur atque molestias.</h1>
</div>

user_149562770 
white-space: nowrap;

I think you just want this?

.project-container {
    display: grid;
    height: 350px;
    width: 350px;
    background: #c4c4c4;
    margin-bottom: 3%;
}

.project-title{
    height: 45px;
    width: 100%;
    background-color: red;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    white-space: nowrap;
}
<div class="project-container">
    <h1 class="project-title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores dignissimos praesentium dolorem saepe velit at libero a consectetur atque molestias.</h1>
</div>

user_105489270

just add white-space: nowrap; to class project-title

user_109252500
Related