Matnni qanday qilib kesish kerak?

Mana mening ekranim:

Mana mening ekranim:

va bu mening kodim:

<div style="background:green; width:100px; height:27px;">
This is text to be written here
</div>

Mening savolim, agar divdan chiqib ketadigan bo'lsa, matnni qanday bezash kerak? Men matnni ikkinchi quti singari kesib olishni istayman. Iltimos, buni qanday qilishni ayting.

2
qo'shib qo'ydi muallif Sharma Vikram, manba

7 javoblar

toshqin va matnni to'ldirish CSS qoidasini ishlating

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

div {
  overflow: hidden
  text-overflow: hidden
}
<div style="background:green; width:100px; height:27px;">
This is text to be written here
</div>
</div> </div>

text-overflow will only work when the container's overflow property has the value hidden, scroll or auto and white-space: nowrap as described in the link below

This site talks about the topic well if you'd like to learn more

4
qo'shib qo'ydi

Buni sizning uslubingizga qo'shishingiz kerak.

matn ko'chirish: ellipsis; toshqin: yashirin; oq bo'shliq: nowrap;

enter image description here

Namoyish

3
qo'shib qo'ydi

Style matn oqimini, oq bo'shliqni, ortiqcha xususiyatini o'rnating:<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<div style="background: green;height: 27px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100px;">
This is text to be written here
</div>
</div> </div>
3
qo'shib qo'ydi

Quyidagi uslub xususiyatlarini o'rnating:

  • matnni ko'chirish: ellipsis
  • oq-bo'shliq: nowrap
  • ni bosing
  • toshqin: yashirin

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<div style="background:green; width:100px; height:27px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;">
This is text to be written here
</div>
</div> </div>
2
qo'shib qo'ydi

oq-bo'shliq: nowrap bilan text-overflow: ellipsis; xususiyatidan foydalaning; toshqin: yashirin; .

Shunday qilib, sizning kodingiz shunday bo'ladi

<div style="background:green; width:100px; height:27px;text-overflow: ellipsis;white-space: nowrap; overflow: hidden;">
This is text to be written here
</div>

Here is a good explanation of what's going on.

2
qo'shib qo'ydi

Ushbu CSS kodingizni qo'shing:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

div{
  overflow: hidden;
  white-space: nowrap; 
  text-overflow: ellipsis;
}
<div style="background:green; width:100px; height:27px;">
This is text to be written here
</div>
</div> </div>
1
qo'shib qo'ydi

Matnni CSS yoki jQuery yordamida kesish uchun kod

jQuery

<div id="text">
This is text to be written here
</div>

<script type="text/javascript">
 $(document).ready(function(){
  var text =$('#text').html();
  if(text.length>20){
   $('#text').html(text.substr(0,20)+'...') ;
  }
 });

CSS

<div id="css">
This is text to be written here
</div>

 #css {
  text-overflow: ellipsis ;
  background:green; 
  width:100px; 
  height:27px;
  display:inline-block;
  overflow: hidden;
  white-space:nowrap;
}

Rahmat

1
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb