সিএসএস সহ অনুচ্ছেদের দ্বিতীয় লাইন থেকে সূচক শুরু

Question

আমি অনুচ্ছেদের দ্বিতীয় লাইন থেকে শুরু করে কীভাবে ইনডেন্ট করব?

আমি চেষ্টা করেছিলাম

p {
    text-indent: 200px;
}
p:first-line {
    text-indent: 0;
}

এবং

p {
    margin-left: 200px;
}
p:first-line {
    margin-left: 0;
}

এবং

(with position:relative;)
p {
    left: 200px;
}
p:first-line {
    left: 0;
}

Comments

আপনার সমস্ত প্রথম লাইনের পাঠ্য ইনডেন্ট 0 তে সেট করা আছে কেন? এছাড়াও, আমি কীভাবে এটি করব তা জানিনা, তবে এই তালিকা থেকে নিখোঁজ হওয়া বিষয়টি আমার কাছে সবচেয়ে বেশি অর্থবোধ করে, প্যাডিং করে।

— স্কারলিনস্কি

Answer 1

এটা আক্ষরিক শুধু দ্বিতীয় লাইন আপনি ইন্ডেন্ট করতে চান, বা এটা থেকে দ্বিতীয় লাইন (অর্থাৎ। একটি ঝুলন্ত ইন্ডেন্ট )?

যদি এটি পরে হয় তবে এই জেএসফিডেলের লাইন বরাবর কিছু উপযুক্ত হবে।

    div {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }
    
    span {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>

এই উদাহরণটি দেখায় যে কীভাবে একটি ডিআইভি বা স্প্যানে একই সিএসএস সিনট্যাক্স ব্যবহার করে বিভিন্ন প্রভাব তৈরি হয়।

Comments

@ রিউবেন আপনার মন্তব্যের উপর ভিত্তি করে যা এখন মুছে ফেলা হয়েছে, আমি ধরে নিয়েছি যে আপনি মুখের মুখোমুখি দ্বিতীয় লাইনের মধ্য থেকে এসেছিলেন - এবং ভবিষ্যতের দর্শকদের জন্য সম্ভবত এই শব্দটি আরও ভাল, যেখানে বাক্য গঠনটি পি ডিভ বা স্প্যান নয় is jsfiddle.net/gg9Hx

— redditor

প্যাডিং-বাম এবং তারপরে নেতিবাচক পাঠ্য-ইনডেন্ট কেন? কেন এটি এমন কাজ করা উচিত? অদ্ভুত মনে হচ্ছে. কেন শুধু পজিটিভ নয় text-indent?

— ডন চ্যাডল

স্প্যানটিতে টেক্সট-ইনডেন্টের কোনও প্রভাব নেই। এটি একই ফলাফলের জন্য স্প্যানের স্টাইলিং থেকে সরানো যেতে পারে।

— স্যাম হাসলার

Answer 2

বাম-মার্জিন তৈরি করুন: 2 মি বা ততোধিক পুরো পাঠ্যটি প্রথম লাইন থেকে ডান 2 মি পর্যন্ত চাপ দেবে। টেক্সট-ইনডেন্ট যুক্ত করুন (প্রথম লাইনে প্রযোজ্য) -2 এম বা আরও হিসাবে .. এটি মার্জিন ছাড়াই প্রথম লাইনে ফিরে আসে। আমি এটি তালিকা ট্যাগের জন্য চেষ্টা করেছিলাম

<style>
    ul li{
      margin-left: 2em;
      text-indent: -2em;
    }
</style>

Answer 3

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

p { margin-left: -2em; 
 text-indent: 2em 
 }

Comments

এটি ওপি যা বলেছে তার সম্পূর্ণ বিপরীতে কাজ করে বলে মনে হচ্ছে। @ টেকিলাজের সংস্করণটি সঠিক। আপনাকে

— বিয়োগের

এটি আমার প্রয়োজন প্রায় ঠিক এটিই। গৃহীত উত্তরটি আমার পক্ষে কাজ করবে না কারণ আমার সিএমএসে স্প্যান যোগ করার স্বাধীনতা আমার নেই। এখানে সমাধানের সাথে আমার একটাই সমস্যা ছিল, তা হচ্ছে প্রান্তিকের বাম দিকটি একটি পাত্রে বাইরে পুরো অনুচ্ছেদটি টানবে। সুতরাং আমি 'অবস্থান: আপেক্ষিক' এবং 'বাম: 2 ম' যুক্ত করেছি এবং এটি নিখুঁত। @ অ্যালেক্সহলসগ্রোভের মন্তব্যের বিপরীতে, টেকিলিজের উত্তর আমার পক্ষে মোটেও কার্যকর হয়নি, তবে সম্ভবত কারণ আমি একটি তালিকার উপাদানটিতে এটি করছি না।

— স্টু ফারলং

Answer 4

একটি প্যারাতে বৃহত্তর প্রথম শব্দের জন্য আমাকে দুটি সারি ইন্ডেন্ট করা দরকার needed একটি ভারী ওষুধযুক্ত সমাধান হ'ল এসভিজি উপাদানগুলিতে পাঠ্য স্থাপন করা এবং এটি <আইএমজি> এর মতোই স্থান দেওয়া। ভাসা এবং এসভিজির উচ্চতা ট্যাগ ব্যবহার করে কতগুলি সারি इंडেন্ট করা হবে তা নির্ধারণ করে eg

<p style="color: blue; font-size: large; padding-top: 4px;">
<svg height="44" width="260" style="float:left;margin-top:-8px;"><text x="0" y="36" fill="blue" font-family="Verdana" font-size="36">Lorum Ipsum</text></svg> 
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

• এসভিজির উচ্চতা এবং প্রস্থ নির্ধারিত অঞ্চলটি অবরুদ্ধ।
• Y = 36 হ'ল এসভিজি পাঠ্য বেসলাইনের গভীরতা এবং হরফ আকারের সমান
• মার্জিন-টপ এর এসভিজি পাঠ্য এবং প্যারা পাঠ্যের সেরা সারিবদ্ধকরণের অনুমতি দেয়
• বংশধরদের যত্ন প্রয়োজন মনে করানোর জন্য এখানে প্রথম দুটি শব্দ ব্যবহার করা হয়েছে

হ্যাঁ এটি অসুবিধাগুলিযুক্ত তবে এটি উপস্থিত ডিভের প্রস্থের চেয়ে পৃথক।

উপরের উত্তরটি আমার নিজস্ব প্রশ্নের কাছে ছিল যে কোনও প্যারাটির প্রথম শব্দ (গুলি) বড় হতে এবং দুটি সারির উপরে অবস্থিত। কেবলমাত্র প্যারার প্রথম দুটি লাইন ইনডেন্ট করতে আপনি সমস্ত এসভিজি ট্যাগগুলি নিম্নলিখিত একক পিক্সেল ইমগের সাথে প্রতিস্থাপন করতে পারেন:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />

Answer 5

একটি সিএসএস 3 কার্যকরী খসড়া রয়েছে যা আশা করি শীঘ্রই আপনাকে কেবল লেখার অনুমতি দেবে:

p { text-indent: 200px hanging; }

লক্ষ্য রাখুন: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Answer 6

আপনি যদি তালিকা হিসাবে শৈলী

আপনি "পাঠ্য-প্রান্তিককরণ: প্রাথমিক" করতে পারেন এবং পরবর্তী লাইনগুলি সমস্ত ইনডেন্ট করবে। আমি বুঝতে পারি এটি আপনার প্রয়োজনের সাথে খাপ খায় না, তবে আমি আমার মার্কআপ পরিবর্তন করার আগে অন্য কোনও সমাধান আছে কিনা তা পরীক্ষা করে দেখছিলাম ..

আমার ধারণা, দ্বিতীয় লাইনটি স্থাপন করাও কার্যকর হবে তবে কন্টেন্টটি যথাযথভাবে প্রবাহিত হওয়ার জন্য মানব চিন্তাভাবনা প্রয়োজন, এবং অবশ্যই হার্ড লাইন ব্রেক (যা আমাকে বিরক্ত করবে না) per

Comments

স্ট্যাকওভারফ্লোতে স্বাগতম। দেখে মনে হচ্ছে আপনার এই ইনডেন্টেশন সমস্যার কোনও সমাধান আছে। তবে আপনি যদি কিছু মার্কআপ সরবরাহ করেন এবং সমাধানটি ব্যাখ্যা করেন তবে এটি সবার পক্ষে দুর্দান্ত সহায়ক হবে। আপনি কোনও ওয়ার্কিং ডেমো তৈরি করতে jsfiddle.net বা অন্যান্য পরিষেবা ব্যবহার করতে পারেন। শুভকামনা.

— EGL 2-101