min-width and max-width not working which they supposed to work

Question

User283528319 posted

Hi all

I want a <g class="gr_ gr_21 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="21" data-gr-id="21">td</g> act like this

don't word wrap until 350px than <g class="gr_ gr_79 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="79" data-gr-id="79">wrap</g>. <g class="gr_ gr_161 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="161" data-gr-id="161">However</g> I can not <g class="gr_ gr_106 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="106" data-gr-id="106">achive</g> this via min and max width and white space

could you help me pls.

Answer 1

User475983607 posted

fatihbarut

I want a td act like this

don't word wrap until 350px than wrap. However I can not achive this via min and max width and white space

Please post source code or an example code that reproduces the issue so we are not left guessing.  Also provide the steps to reproduce the issue.

Answer 2

User283571144 posted

Hi fatihbarut,

According to your description, I suggest you could try to use css style(overflow-wrap) to achieve your requirement.

The overflow-wrap CSS property sets whether the browser should insert line breaks within words to prevent text from overflowing its content box.

More details, you could refer to below test demo:

    <table style="border:1px solid">
        <tr>
            <td style="min-width:50px;max-width:350px;overflow-wrap:break-word;">oneaaaaaaaaa                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
 
 
    </table>

Result:

Best Regards,

Brando

Answer 3

User283528319 posted

<g class="gr_ gr_9 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="9" data-gr-id="9">Actually</g> the problem is 

if I say max-width:300 and white-space<g class="gr_ gr_519 gr-alert gr_gramm gr_inline_cards gr_run_anim Style replaceWithoutSep" id="519" data-gr-id="519">:nor</g>mal it breaks the line from 50 <g class="gr_ gr_78 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="78" data-gr-id="78">not</g> 300

if I say <g class="gr_ gr_580 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="580" data-gr-id="580">max width</g>: 300 and white-space:<g class="gr_ gr_558 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="558" data-gr-id="558">nowrap</g> this time the text ower flow to next column after 300

if I say min-width 200 it doesn't shrink the width when the text is only "sample text" and it looks like       | sample text            |

Answer 4

User-474980206 posted

that is correct.

max-width is just the max. the td can not get wider than the max. it does not change the auto width if its less than the max
min-width is just the min. the td can not be smaller than the min.

word-wrap controls the text content in a block. 

normal - break on standard word breaks. a long word will over run the width of the block element if the block element has a specified width
no wrap - no wrapping. again it can overflow the width
break-word - break a word instead of overflow

to do what you want, there is no CSS. you must write javascript to implement the effect. if you want to wrap at 300 only when the length is great, than

1) set the max to 300
2) set overflow hidden
3) wrap the text with  div and make the div no-wrap
4) measure the divs of all rows.

    if any div width > 300, then set width of the divs to 300 and set wrap to break-word
    else set the td width to max width of any div.

hint: you can use CSS inheritance to do set all the tds and divs at once.

Answer 5

User283528319 posted

thanks but I really <g class="gr_ gr_11 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="11" data-gr-id="11">dont</g> like js to get into <g class="gr_ gr_30 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="30" data-gr-id="30">css's</g> jobs :)