What you can do is work with this the_excerpt() change this instead of the_content();

And give the amount of words that you want, add this in functions.php after you add the_excerpt();

function custom_excerpt_length( $length ) {
    return 20;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

More info here: https://developer.wordpress.org/reference/functions/the_excerpt/

What you can do is work with this the_excerpt() change this instead of the_content();

And give the amount of words that you want, add this in functions.php after you add the_excerpt();

function custom_excerpt_length( $length ) {
    return 20;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

More info here: https://developer.wordpress.org/reference/functions/the_excerpt/

After that force the first line, using this for example.

.post p {
    width: 100px;
    white-space:nowrap;
    overflow:hidden;
}

add the width of the content.(even if its responsive just change the css as you want).