We Keep Coding

How to set width to min-content but allow words to be on the same line?

I have a div that contains text, but there is empty space around them by default. Setting the width to min-content solves this, but it means that each word will be on a separate line. If there is space for more than 1 word on 1 line, I need the words to stay be on one line.
Here is what things look like with without width: min-content:
As you can see, there is space around this for some reason and I can't figure out why. It's just a grid item/flex item and no css a part from font size and line height.

You can give reffer below code for achieving this.
You can try using white-space: pre-wrap; or white-space: nowrap; for your case
.my-text{
white-space: pre-wrap;
}
or
.my-text{
white-space: nowrap;
}
You can reffer here

I think max-width: fit-content; is what you need.

Styling for overflowing 2 text containers side by side

Hi so I am styling something which displays both the user username and the title of the item on the same line, something along the lines of:
username / title (similar to github)
i want to style it such that if the full width of username / title is less than the container width, it should display the full text of both, but if they exceed the max width of the container and start to overflow i want them to keep to about a 50-50 or maybe 40-60 ratio with ellipsis, like this:
long_usern... / long_ti...
so far i've screwed around a bit with max-width and min-width and percentages, and i've ended up with this final state:
.username {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.title{
min-width: 50%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
https://jsfiddle.net/9csohvpa/4/
however when the title is too long sometimes it obscures the username to the point where it is only a few dots and does not hold any meaning.
... / super_duper_ultra_long...
sometimes it manages to still show a bit of the username while overflowing the rest of the long title, although i do not really understand how it works and how priority is given to each element in this case about how much of the full width it is allowed to take up. i'd like the username to take up at least 30-40% of the width no matter how long the text in each element is.
its fine if the solution gives a hard limit on the username like doesn't allow it to go over 40% width in the case of long username with short title that doesn't fill up the to max width because it looks a little silly with a long username and short title.
i've tried min-width for the username class but in the case of a short username there is a lot of blank space before the slash and i don't want that.
i / loveyou
i've also tried max-width 50-50 but with a short username and long title the title doesn't fill up the remainder of the space in the width of the flex container like i want it to
i / hateyousomu... |
| <-- maximum available width for container
username / long_title_na...|
|
i / hateyousomuch555 | <-- ideal solution
in any case, the ideal solution should manage to keep the elements at about an 40-60 ratio of the max-width when the sum of widths of both element exceeds the maximum available width of the container, but show the full width of text in both elements otherwise
Edit: Thanks #robbieAreBest for answering, and uncovering that adding width: fit-content to the .username class doesn't work for some reason (in fact it has no effect on the width of the class at all). Through this I uncovered that the percentage width the username section takes up in the container is directly proportional to its length, and the 50/50 ratio holds up only when the length of the username is about the same as the length of the title or longer (e.g. https://jsfiddle.net/pys25tfa/). Does anyone know why this happens or how to fix it? Would be greatly appreciated.
Edit 2 + existing solution I'm willing to make do with:
Solution has been found, but every solution has room for improvements. Current solution only considers the basic 4 cases I mentioned about and limits the username to about 40% of the total width even with a short title. If I missed out any possible combinations, if someone manages to find a case where my code breaks, or if someone manages to find a better solution which deals with long username/short title case better, please do let me know.
The ideal code (which may be a tad bit specific/unnecessary): Long username with long title that combined overflow the full width will limit the width of each element at 40/60 ratio respectively, but a long username and short title which does not overflow the full width limits the username to about 60% of the width instead, allowing more info to be displayed to the user. If anyone manages to find a solution which displays the full username in the case of long username and short title please do post below as well. Thanks all for your effort to help me :) I appreciate it very much.

I would add width: fit-content to your .username class
.username {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: fit-content;
}
.title{
min-width: 50%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
This should let the username shrink and give more space to your .title span while also taking up half the available area if needed.
EDIT AFTER COMMENT
If the above doesn't give you the results you are after you might want to try using grid display instead:
html:
<div class="wrap">
<span class="username">usern</span>
<span class="title"> / super_duper_long_title</span>
</div>
css:
.username {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.title{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wrap {
display: grid;
width: 150px;
grid-template-columns: auto minmax(20%,100%);
}
https://jsfiddle.net/eu2t0fq3/1/

How to control the Text with more characters(both alphabets and numeric values) in an td?

Is any option to control the text which is in <td>
I am using this css style:
word-wrap: break-word;
width: 200px;
display: block;
Without any text in td it is looking good but when there is a text by using the above css the UI alignment is getting disturbed.
See here in second image the alignment at QR tag td is disturbed completely.
Even if there are more no.of characters are there the alignment shouldnot be disturbed .
please help me out with this issue.

Assuming you only want the row to have a fixed height so that only one line of text to be visible.
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Text-overflow does not work

I my page i have a panel and a table in the panel, this is my code in JSFiddle
I have a problem in my code, in td of table i have text and i set text-overflow for that but it doesn't show correctly. it shows like this :
But i want text shows like this:
How can i fix it?

You can give your paragraph a class for easier to manage:
<p class="text">...............</p>
Then you can use following css properties to achieve your task:
.text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
Updated Fiddle

hope it will help you, remove the text-overflow and white-space from td.
.info-table td {
overflow: hidden;
}
demo

remove the white-space: nowrap; property in your css, you will get

Actually overflow works only on single line that's why your all content shrink onto one line.
you may use some jQuery/Javascript library like this http://pvdspek.github.com/jquery.autoellipsis/ or try a pure css solution using this tuts
http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

try something like this,FIDDLE
change your code
FROM THIS
.info-table td {
overflow: hidden;
text-overflow: inherit;
white-space: pre-line;
}
TO THIS
.info-table td {
overflow: hidden;
}
EDITED CODE FIDDLE
.info-table td p{
max-height:260px;
line-height: 18px;
text-align: justify;
font-size: 10px;
font-weight: normal;
}

increase the height of div. i think due to less size it showing like this

If the text doesn't fit on the same row don't display all

I have a left sidebar on my website which contains a list with links. If one link is very long, it won't fit on only one row.
For example: 'This is a very long long long link'.
What can I do to display as much as posible from this text (eg. 'This is a very long') but in such a way that it will fit on only one row (one row has 200px width)?

Set the CSS to:
overflow:hidden;
white-space:nowrap;

There is a CSS3 property called text-overflow that controls just what you describe. In combination with overflow: hidden; and white-space: nowrap; you can customize what is displayed at the end of the line.
There's documentation here that's good and describes the property's flexibility. But let's say all you want to do is add an ellipsis (…) to the end of lines that exceed their width, then all you have to write is :
.sidebar p { /*Or whatever selector matches*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Apply overflow: hidden; on the container, along with a set width and height.