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.

Change verticalAlign in div from javascript code

I am trying change vertical-align style of div like using below code but it doesn't do that, how can I change vertical-align position
title = document.getElementById("text");
title.style.verticalAlign = "middle";
body {
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow: hidden;
}
<div id="text"></div>

You have two subtle problems in your approach.
you need to set the height of #text in order to be able to vertically align its contents
vertical-align is not the style property you require. Nowadays, the vertical align is better obtained with a combination of display:flex and align-items: center
see this jsfiddle https://jsfiddle.net/83bf4qdh/

First: your div has no content so you won't see anything.
Second: vertical-align works only for inline or flex blocks. div is block by default so it won't work. You can set
display: flex;
or
display: inline;
for it to work then.

How can I cut long text according to available div area size?

I have a text and preview div area. Whenever I have put long text on the div area, it is overflowed out of div area. I have tried text-wrap:normal, but it does not cut the context and showed only what text fit to the available area.
How can I cut long text according to available div area size? Afterwards, I will put css read more button to end of preview text area.

Use text-overflow: ellipsis;, that when combined with overflow: hidden and one-line technique white-space: nowrap adds a ... at the end of the text, containing it within the parent's width:
div {
overflow: hidden;
width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
}
<div>
my very long text is here my very long text is here
</div>
[Continue to read]

You have to add overflov:hidden style for preview container so the text what will be after container won't be shown.

Use overflow: hidden property. The overflow is clipped, and the rest of the content will be invisible:
#preview-div {
overflow: hidden;
}

How to make content in DIV align vertically

<div id="content">ABC<div>UUU</div></div>
I just want to find some way to align vertically in middle for div#content. Actually I have some solutions. First one is using line-height, however it can not work if there's another div in the div#content. And vertical-align:middle I think just works for table? Is there any other usable solutions?
I try the vertical-align:middle and display:table-cell, the other issue comes,
the width cannot works, i give that div a big width, that can fill out the screen(1438px), but now the width is also that number but just fill out the 1/3 width of screen.
The table-cell seems like make every cell in the screen, but i just want to give them specified length for table cell.

use this for your requirement
#content {display:table-cell; vertical-align:middle}

With display:table-cell declared on your element, vertical align will work.
#content {
display:table-cell;
vertical-align:middle
}

See thorough explanation on vertical alignment for both normal and inline DIVs at http://phrogz.net/css/vertical-align/index.html

Expounding upon other answers using display:table-cell;vertical-align:middle... Table cells cannot have 100% width, but their containers can!
Using a CSS Table
Items with a table display accept dynamic widths:
#existingContainer {
display: table;
width: 100%;
}
#content {
display: table-cell;
vertical-align: middle;
height: 100px; /* example */
}
Say, with sample HTML:
<div id="existingContainer">
...
<div id="content">ABC<div>UUU</div></div>
...
</div>
Using a Clearing Div
Alternatively, putting your table-cell directly into a block element will ensure no inline elements sit beside it:
<div id="newContainer">
<div id="content">ABC<div>UUU</div></div>
</div>
With sample CSS:
#newContainer {
display: block;
}
#content {
display: table-cell;
vertical-align: middle;
height: 100px; /* example */
}

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.