এইচটিএমএল / সিএসএস ব্যবহার করে কীভাবে স্পেস / ট্যাবগুলি পাঠ্যে সন্নিবেশ করা যায়


182

সম্ভাব্য উপায়:

<pre> ... </pre>

অথবা

style="white-space:pre"

আর কিছু?



আপনার অর্থ "ট্যাগ" বা "ট্যাব"?
ব্যবহারকারী 123444555621

2
&nbsp;ট্যাব তৈরি করা ছাড়াও কি এর সমতুল্য ?
জুয়ান সোলানো

নেই &tab;, তবে আমি গিথুবে এই ছোট্ট জেএস স্নিপেটটি পেয়েছি (মূলত &nbsp;সারিবদ্ধ পাঁচটি তৈরি করার জন্য এটি সন্ধান করুন এবং প্রতিস্থাপন করুন ) ... gist.github.com/AustinDizzy/1231e82184bea35c42ad
ডিজিগ

উত্তর:


143

tab spaceদুটি শব্দ / বাক্যগুলির মধ্যে সন্নিবেশ করানোর জন্য আমি সাধারণত ব্যবহার করি

&emsp; এবং &ensp;


113

যে জায়গাগুলির প্রস্থ / উচ্চতা &nbsp;আমি সাধারণত ব্যবহার করি না এর বাইরে :

অনুভূমিক স্পেসারের জন্য:

<span style="display:inline-block; width: YOURWIDTH;"></span>

উল্লম্ব স্পেসারের জন্য:

<span style="display:block; height: YOURHEIGHT;"></span>

দ্রষ্টব্য: পিক্সেল, 10px এর ক্ষেত্রে উচ্চতা বা প্রস্থ নির্দিষ্ট করা নিশ্চিত করুন।
7

57

আপনি ব্যবহার করতে পারেন &nbsp;, স্পেস জন্য &lt;জন্য <(কম, সত্তা সংখ্যা &#60;) এবং &gt;জন্য >(তার চেয়ে অনেক বেশী, সত্তা সংখ্যা &#62;)।

এইচটিএমএল সত্তা থেকে একটি সম্পূর্ণ তালিকা পাওয়া যাবে ।


43

ব্যবহার করে দেখুন &emsp;

বিশেষ অক্ষরে নথি হিসাবে :

চরিত্রটি সন্নিবেশ করে &ensp;এবং &emsp;যথাক্রমে একটি এন স্পেস এবং একটি এম স্পেস বোঝায়, যেখানে একটি এন স্পেস অর্ধেক পয়েন্ট আকার এবং একটি এম স্পেস বর্তমান ফন্টের পয়েন্ট আকারের সমান হয়। স্থির পিচ ফন্টের জন্য, ব্যবহারকারী এজেন্ট এন স্পেসটিকে একটি স্পেস অক্ষরের সমতুল্য এবং এম স্পেসকে দুটি স্থানের অক্ষরের সমতুল্য হিসাবে বিবেচনা করতে পারে।


24

আমি এটি ব্যবহার করতে চাই:

আপনার সিএসএসে:

.tab { 
       display:inline-block; 
       margin-left: 40px; 
}

আপনার এইচটিএমএলে:

<p>Some Text <span class="tab">Tabbed Text</span></p>

1
এটি একটি ভাল উত্তর। কিন্তু আমি শুধু বলতে এটি ভালো হতে সিএসএস বর্গ পরিবর্তে আইডি ব্যবহার হবে চাই (এটা প্রতিস্থাপন মানে #tabদ্বারা .tabএবং id="tab"দ্বারা class="tab") আমরা যদি এটা একবারের বেশি একটি একই নথিতে ব্যবহার করেন তখন আমরা অনির্ধারিত আচরণ থাকতে পারে কারণ। উদাহরণস্বরূপ, এই প্রশ্নটি দেখুন
হালদার ভিটার লিমা পেরেইরা

এটি আজ আমাকে সাহায্য করেছে। তোমাকে অনেক ধন্যবাদ.
জাস্টনসর

19

Spacesএইচটিএমএল মধ্যে প্রকার

পাঠ্যের মধ্যে চারটি স্পেস তৈরি করে- &emsp;

পাঠ্যের মধ্যে দুটি স্পেস তৈরি করে - &ensp;

পাঠ্যের মধ্যে একটি নিয়মিত স্থান তৈরি করে - &nbsp;

একটি সংকীর্ণ স্থান তৈরি করে (নিয়মিত জায়গার মতো তবে সামান্য পার্থক্য - "&thinsp";

বাক্যগুলির মধ্যে ব্যবধান - "</br>"

এই লিঙ্কটি আপনাকে সাহায্য করতে পারে। [ Https://hea-www.harvard.edu/~fine/Tech/html-sentences.html] দেখুন


15
<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>

এই অনুচ্ছেদের প্রথম লাইনটি একটি ট্যাবড ইনডেন্টের মতো প্রায় পাঁচটি অক্ষর যুক্ত হবে।

দেখুন কিভাবে ব্যবহার HTML এবং CSS এর ট্যাবস এবং ব্যবধান তৈরি করুন আরও তথ্যের জন্য।


6

<span style="padding-left:68px;"></span>

আপনি এটি ব্যবহার করতে পারেন:

padding-left
padding-right
padding-top
padding-bottom

4

@ ইভারের থেকে আরও এক ধাপ এগিয়ে যান এবং নিজের পছন্দ মতো নিজস্ব কাস্টম ট্যাগ স্টাইল করুন ... আমার জন্য 'ট্যাব' মনে রাখা এবং টাইপ করা সহজ।

tab {
    display: inline-block;
    margin-left: 40px;
}

এবং এইচটিএমএল বাস্তবায়ন ...

<p>Left side of the whitespace<tab>Right side of the whitespace</p>

এই কোড নমুনার স্ক্রিনশট

এবং আমার স্ক্রিনশট ...


3

আপনি যদি কিছু লাইনে স্টাফ সারিবদ্ধ করতে ট্যাবগুলির জন্য জিজ্ঞাসা করছেন তবে আপনি এটি ব্যবহার করতে পারেন <table>

প্রতিটি লাইন .োকানো <tr> ... </tr>। এবং প্রতিটি লাইনের ভিতরে উপাদান <td> ... </td>। এবং অবশ্যই আপনি প্রতিটি টেবিলে ঘরের প্যাডিংগুলি সর্বদা তাদের মধ্যে স্থানটি সামঞ্জস্য করতে নিয়ন্ত্রণ করতে পারেন।

এটি তাদের প্রান্তিককরণ করবে এবং তারা দেখতে খুব সুন্দর লাগবে :)


3
টেবিলগুলি ফর্ম্যাটের জন্য নয়, টবুলার ডেটা উপস্থাপন করতে ব্যবহার করা উচিত। 90 এর দশকের টেবিলগুলিতে যেখানে ব্রাউজার জুড়ে ধারাবাহিকভাবে কাজ করে এমন স্টাইলগুলির সাথে এইচটিএমএল লেখার সীমাবদ্ধতার কারণে এবং প্রায়শই ফর্ম্যাটিংয়ের জন্য ব্যবহৃত হয়। আজ এটি একটি বিরোধী নিদর্শন হিসাবে বিবেচিত হয়।
ডেভিড বাউকুম

আমি আপনার বক্তব্যটি দেখতে পাচ্ছি, এটি কিছু পুরানো-স্কুল সমাধান হতে পারে তবে আমার একবার তার সমস্যা হয়েছিল এবং টেবিলগুলি আমার জন্য নিখুঁতভাবে কাজ করেছিল
আর্জেণ্টো

1
হ্যাঁ, তবে আপনি শব্দার্থক অর্থ জঞ্জাল না করে টেবিল স্টাইলিং (আধুনিক সিএসএস সহ) ব্যবহার করতে পারেন! প্রদর্শন: টেবিল ইত্যাদি
জুলিক্স

3

বিকল্পভাবে একটি নির্দিষ্ট স্থান বা হার্ড স্পেস হিসাবে উল্লেখ করা হয়, নন-ব্রেকিং স্পেস (এনবিএসপি) প্রোগ্রামিং এবং ওয়ার্ড প্রসেসিংয়ে একটি লাইনে এমন একটি স্থান তৈরি করতে ব্যবহৃত হয় যা শব্দের মোড়ানো দ্বারা ভাঙা যায় না।

এইচটিএমএল দিয়ে, &nbsp;আপনাকে একাধিক স্পেস তৈরি করতে দেয় যা ওয়েব পৃষ্ঠায় দৃশ্যমান এবং কেবল উত্স কোডে নয়।


1

সাদা জায়গা? আপনি কেবল প্যাডিং ব্যবহার করতে পারেন না? এটি একটি ধারণা। এভাবেই আপনি নিজের উপাদানটির চারপাশে কিছু "ফাঁকা অঞ্চল" যুক্ত করতে পারেন। সুতরাং আপনি নিম্নলিখিত সিএসএস ট্যাগ ব্যবহার করতে পারেন:

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;

1

&#8287;এইচটিএমএল বিষয়বস্তুতে একটি স্থান যুক্ত করতে আপনি এই কোডটি ব্যবহার করতে পারেন । ট্যাব স্পেসের জন্য, এটি 5 বার বা তার বেশি ব্যবহার করুন।

এখানে একটি উদাহরণ দেখুন: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace


1

স্ট্যান্ডার্ড সিএসএস ব্যবহার করুন tab-size

একটি ট্যাব প্রতীক ঢোকাতে (যদি মান ট্যাব কী, স্থানান্তর কার্সার) প্রেস Alt+ + 0+ + 0+ +9

.element {
    -moz-tab-size: 4;
    tab-size: 4;
}

আমার পছন্দসই:

*{-moz-tab-size: 1; tab-size: 1;}

ট্যাব-আকারে স্নিপেট বা দ্রুত পাওয়া উদাহরণ দেখুন ।

.t1{
    -moz-tab-size: 1;
    tab-size: 1;
}
.t2{
    -moz-tab-size: 2;
    tab-size: 2;
}
.t4{
    -moz-tab-size: 4;
    tab-size: 4;
}
pre {border: 1px dotted;}
<h3>tab = {default} space</h3>
<pre>
	one tab text
		two tab text
</pre>

<h3>tab = 1 space</h3>
<pre class="t1">
	one tab text
		two tab text
</pre>

<h3>tab = 2 space</h3>
<pre class="t2">
	one tab text
		two tab text
</pre>

<h3>tab = 4 space</h3>
<pre class="t4">
	one tab text
		two tab text
</pre>


0

এটি আমার পক্ষে কাজ করেছে:

আমার সিএসএসে আমি:

tab0  { position:absolute;left:25px;  }
tab1  { position:absolute;left:50px;  }
tab2  { position:absolute;left:75px;  }
tab3  { position:absolute;left:100px; }
tab4  { position:absolute;left:125px; }
tab5  { position:absolute;left:150px; }
tab6  { position:absolute;left:175px; }
tab7  { position:absolute;left:200px; }
tab8  { position:absolute;left:225px; }
tab9  { position:absolute;left:250px; }
tab10 { position:absolute;left:275px; }

তারপরে এইচটিএমএলে আমি কেবল আমার ট্যাবগুলি ব্যবহার করি:

Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75

0

ব্যবহারকারীর 65766576766161 to উত্তর আমার প্রয়োজনের নিকটতম (বেশ কয়েকটি লাইনে জিনিস আস্তরণের)। যাইহোক, প্রদত্ত হিসাবে কাজ করার জন্য উদাহরণ কোডটি পেলাম না, তবে আমার এটি নীচে পরিবর্তন করা দরকার:

<html>
    <head>
        <style>
            .tab9 {position:absolute;left:150px; }
        </style>
    </head>

    <body>
        Dog Food: <span class="tab9"> $30</span><br/>
        Milk of Magnesia:<span class="tab9"> $30</span><br/>
        Pizza Kit:<span class="tab9"> $5</span><br/>
        Mt Dew <span class="tab9"> $1.75</span><br/>
    </body>
</html>

আপনি ডান-প্রান্তিক নম্বর প্রয়োজন আপনি পরিবর্তন করতে পারেন left:150pxথেকে right:150px, কিন্তু আপনি (যেমন সংখ্যার লিখিত স্ক্রীনের ডান প্রান্ত থেকে 150 পিক্সেল হবে) পর্দার প্রস্থ উপর ভিত্তি করে সংখ্যা পরিবর্তন করতে হবে।



-2

এখানে একটি "ট্যাব" পাঠ্য (অনুলিপি এবং পেস্ট করুন): ""

এই সাইটের উত্তর সীমাবদ্ধতার কারণে এটি আলাদা বা সম্পূর্ণ ট্যাব হিসাবে প্রদর্শিত হতে পারে।


1
আমি মনে করি আপনার উত্তরটি আরও পরিষ্কার করে বাকী করা দরকার। আপনার অর্থ কি কোথাও থেকে কোনও স্থান অনুলিপি এবং আটকানো? আমি মনে করি না যে এখানে কাজ করবে।
স্মাইলফ্লেস

1
মার্কডাউন উত্সটিতে একটি ট্যাব রয়েছে, তবে এইচটিএমএল আউটপুটটিতে নেই (এটি পরিবর্তে একটি একক স্থান)।
পিটার মর্টেনসেন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.