সিএসএস কি কোনও উপাদানের প্রতিটি শব্দের পরে একটি লাইন বিরতিতে বাধ্য করতে পারে?

Question

আমি একটি বহুভাষিক সাইট তৈরি করছি, মালিক আমাকে কয়েকটি অনুবাদে সহায়তা করছেন। কিছু প্রদর্শিত বাক্যাংশের সাইটের স্টাইল বজায় রাখতে লাইন ব্রেকগুলির প্রয়োজন।

দুর্ভাগ্যক্রমে, মালিক কোনও কম্পিউটার লোক নয়, তাই যদি সে foo<br />barসুযোগটি দেখে তবে সে অনুবাদ করার সাথে সাথে কোনওভাবেই ডেটা পরিবর্তন করবে।

এমন কোনও উপাদানের প্রয়োগের জন্য কি কোনও সিএসএস সমাধান রয়েছে (প্রস্থ পরিবর্তন করা ছাড়াও) যা প্রতিটি শব্দের পরে ভেঙে যায়?

(আমি জানি যে আমি পিএইচপি-তে এটি করতে পারি, তবে আমি ভাবছি যে সিআইএসকে একই জিনিস সম্পাদন করার জন্য সিএসএসে সম্ভবত জেনে নেই, এমন কোনও নিফটি ট্রিক আছে কি না।)

সম্পাদনা

আমি যা ঘটছে তা চিত্রের চেষ্টা করব:

----------------          ----------------
| Short Word   |          | Gargantuan   |
|              |          | Word         |
----------------          ----------------

দীর্ঘ শব্দটি স্বয়ংক্রিয়ভাবে ভেঙে যায়, সংক্ষিপ্ত শব্দটি হয় না। আমি এটি দেখতে এটি দেখতে চাই:

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------

Comments

এইচটিএমএলে, যখন কোনও নির্দিষ্ট উপাদানের প্রস্থের প্রয়োজন হয় তখন উপাদানগুলি প্রতিটি শব্দের পরে বিরতি দেয়। আপনি কি কথার মধ্যে বোঝাতে চান?

— পল ডি ওয়েট

@ পল - না, আমার এমন একটি সমাধান দরকার যা প্রস্থ নির্ধারণের ভিত্তিতে নয়। সমস্যাটি হচ্ছে, কিছু বাক্যাংশ দীর্ঘ হয় এবং স্বয়ংক্রিয়ভাবে ভেঙে যায় (যেমন আপনি বর্ণনা করেন) এবং কিছু বাক্যাংশগুলি সংক্ষিপ্ত হয় এবং বিরতি দেয় না, একটি বেমানান উপস্থাপনা করে।

— বেন

@ পল - হ্যাঁ, আপনি ঠিক বর্ণনা করার মতো এটি। লেআউটটি সত্যই ক্ষতিগ্রস্থ করছে না তবে এটি আরও ভাল দেখাচ্ছে।

— বেন

আপনি শব্দ-ব্যবধান ব্যবহার করতে পারেন তবে এটি সমস্ত শব্দকে প্রভাবিত করবে .. আমি মনে করি আপনি স্প্যান উপাদানগুলিতে এই শব্দগুলি মোড়ানো করতে পারবেন না।

— মেও

@ মিও - দেখে মনে হচ্ছে, চিন্তার জন্য ধন্যবাদ

— বেন

Answer 1

ব্যবহার

.one-word-per-line {
    word-spacing: <parent-width>; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

যেখানে <parent-width>পিতা বা মাতা উপাদান (অথবা একটি অবাধ উচ্চমূল্য যে এক লাইন মধ্যে মাপসই করা না) প্রস্থ হয়। এইভাবে আপনি নিশ্চিত হতে পারেন যে একটি একক বর্ণের পরে লাইন-ব্রেকও রয়েছে। ক্রোম / এফএফ / অপেরা / আই 7+ + এর সাথে কাজ করে (এবং সম্ভবত এটি আই 66 যেহেতু এটি শব্দ-ব্যবধানকে সমর্থন করে)।

Comments

এটি অবশ্যই সেরা উত্তর

— ইমো

@ টনিমিচেলকোবেট উত্তরটি ব্যাখ্যা করা সত্যিই কঠিন, তবে তার অর্থ: পিতামণ্ডলের উপাদানগুলির প্রস্থটি .parent { word-spacing: 100px; }কোথায় 100px। সমস্যাটি হ'ল যদি আপনার তরল পিতামাত থাকে তবে এই সমাধানটি কাজ করে না।

— জন কুরলাক

শব্দের ব্যবধানের জন্য কেবল একটি খুব উচ্চ মান নির্ধারণ করুন word-spacing: 100000pxএবং আপনাকে পিতামাতার প্রস্থের দিক থেকে তরল হওয়ার বিষয়ে চিন্তা করতে হবে না। 100% এর শব্দের ব্যবধান নির্ধারণ করা বোধগম্য হত (এটি প্যারেন্ট প্রস্থের 100% হত) তবে শতাংশে প্রকাশিত মান সেই CSS সম্পত্তির জন্য সমর্থিত নয়।

— sbisse

এটি খুব সহায়ক ছিল। আমি একটি প্রতিক্রিয়াশীল অবস্থা, যেখানে এক প্রস্থ আমি ট্যাবে টেক্সট চান মোড়ানো তাই তারা সব একই উচ্চতা করছি এটা ব্যবহৃত: word-spacing: 2em; একটি মোবাইল প্রস্থ এ আমি তাদের একক লাইন হতে চান:word-spacing: unset;

— উইল

এটা চমৎকার. ভবিষ্যতে বছর থেকে, একটি গুচ্ছ ধন্যবাদ :)

— লুকাস মদিনা

Answer 2

@ হার্সভানব্লুব প্রদত্ত উত্তরটি কেবল স্থির প্রস্থের প্যারেন্ট পাত্রের সাথে কাজ করে তবে তরল-প্রস্থের পাত্রে ক্ষেত্রে ব্যর্থ হয় ।

আমি প্রচুর সম্পত্তি চেষ্টা করেছি, তবে কিছুই প্রত্যাশার মতো কার্যকর হয়নি। অবশেষে আমি এই সিদ্ধান্তে পৌঁছেছি যে word-spacingখুব বিশাল মূল্য দেওয়া পুরোপুরি সূক্ষ্ম কাজ করে।

p { word-spacing: 9999999px; }

বা, আধুনিক ব্রাউজারগুলির জন্য আপনি সিএসএস vwইউনিট ব্যবহার করতে পারেন (পর্দার আকারের% ভিজ্যুয়াল প্রস্থ)।

p { word-spacing: 100vw; }

Comments

আমি কি চেষ্টা করব!

— ভাসকোর্ট

এটি একটি দুর্দান্ত সমাধান!

— জো কনলিন

& Nbsp; এর সাথে সম্পূর্ণ বিরতি; যদিও।

— ম্যাট ফ্লেচার

ভাল এটি আমার পক্ষে কাজ করে না যা ধারকটির তরল প্রস্থকে খুব বেশি করে দেয়।

— ওঞ্জা

@ ওঞ্জা আপনি কি আপনার সমস্যা দেখিয়ে একটি ফ্রিডল লিঙ্ক ভাগ করতে পারেন?

— দীপক যাদব

Answer 3

উপাদানটিতে প্রয়োগ করে একটি বাক্য পৃথক বাক্যটিতে প্রতিটি শব্দের পৃথক পৃথক সমাধান বর্ণনা করা হয়display:table-caption;

Comments

এটি আসলে দীর্ঘতম শব্দের প্রস্থের ভিত্তিতে কেবলমাত্র শব্দের গোষ্ঠীভুক্ত করে।

— জেমস দক্ষিণ

যদিও এটি একটি লাইনে শব্দের দলবদ্ধ করতে পারে এটি অনেক পরিস্থিতিতে সত্যই ভাল কাজ করে এবং বিশাল শব্দ ব্যবধান বিকল্প হিসাবে হ্যাকি মনে হয় না।

— ডেল

এটিই আমার জন্য পুরোপুরি কাজ করেছে, দুর্দান্ত!

— ম্যাট ফ্লেচার

এটি কোনও ফল দেয় না

— jafarbtech

Answer 4

ব্যবহার করার চেষ্টা করুন white-space: pre-line;। কোডে লাইন-ব্রেক যেখানেই দেখা দেয় সেখানে লাইন-ব্রেক তৈরি করে তবে অতিরিক্ত সাদা স্থান (ট্যাব এবং স্পেস ইত্যাদি) উপেক্ষা করে।

প্রথমে আপনার শব্দগুলিকে আপনার কোডে পৃথক লাইনে লিখুন:

<div>Short
Word</div>

তারপরে শব্দের সমন্বিত উপাদানটিতে স্টাইলটি প্রয়োগ করুন।

div { white-space: pre-line; }

সতর্কতা অবলম্বন করুন , উপাদানটির ভিতরে থাকা কোডের প্রতিটি লাইন ব্রেক একটি লাইন ব্রেক তৈরি করবে। সুতরাং নিম্নলিখিতটি লেখার ফলে প্রথম শব্দের আগে এবং শেষ শব্দের পরে অতিরিক্ত লাইন ব্রেক হবে:

<div>
    Short
    Word
</div>

অন্যান্য সাদা-স্থানের বৈশিষ্ট্যগুলি ব্যাখ্যা করে সিএসএস ট্রিক্সে একটি দুর্দান্ত নিবন্ধ রয়েছে ।

Comments

white-spaceপ্রশ্নের উত্তর দেওয়ার জন্য কীভাবে ব্যবহার করা যেতে পারে তা আপনার ব্যাখ্যা করা উচিত । দুঃখিত, কিন্তু আমি কিভাবে দেখতে পাচ্ছি না।

— jlgrall

ওয়েল সিএসএস ট্রিকসের নিবন্ধটি এটি পুরোপুরি ব্যাখ্যা করে, তাই আমি ভেবেছিলাম উত্তরটি এখানে পুনরায় সাজানোর চেয়ে বরং একটি লিঙ্কই যথেষ্ট হবে।

— নাস

ঠিক আছে, সুতরাং আপনি উত্সটিতে সত্যিকারের লাইন বিরতি স্থাপন করার পরামর্শ দিচ্ছেন, এবং white-space: pre;ট্যাগগুলির মতো এই লাইন ব্রেকগুলি প্রদর্শন করতে " " CSS ব্যবহার <pre>করবেন? এটি কাজ করতে পারে, এবং একটি লাইন বিরতি অনুবাদকদের কাছে এ এর ​​চেয়ে আরও প্রাকৃতিক দেখায় <br />। আমি আপনার উত্তর এটি যুক্ত করতে সম্পাদনা করার চেষ্টা করব :)

— jlgrall

যথাযথভাবে। আসলে white-space: pre-line;এটি সম্ভবত আরও উপযুক্ত হবে, যেহেতু এটি আপনার কোডে অতিরিক্ত সাদা জায়গা উপেক্ষা করে ores আমি উত্তর আপডেট করব।

— নাস

ভাল, সম্ভবত কেবল white-space: pre;আই 7 এর জন্য যুক্ত করুন

— jlgrall

Answer 5

যদি আপনি প্রদত্ত উত্তরগুলি ছাড়াও বিভিন্ন সমাধান থেকে চয়ন করতে সক্ষম হতে চান ...

একটি বিকল্প পদ্ধতি হ'ল ধারকটিকে 0 প্রস্থ দেওয়া এবং নিশ্চিত হওয়া ওভারফ্লো দৃশ্যমান। তারপরে প্রতিটি শব্দ এর বাইরে চলে যাবে এবং এটি তার নিজস্ব লাইনে থাকবে।

div {
  width: 0;
  overflow: visible;
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

বা আপনি এই নতুন প্রস্তাবিত widthমানগুলির মধ্যে একটি ব্যবহার করতে পারেন , আপনি যখন এটি পড়ার সময় অবধি বিদ্যমান।

div {
  width: min-intrinsic;       /* old Chrome, Safari */
  width: -webkit-min-content; /* less old Chrome, Safari */
  width: -moz-min-content;    /* current Firefox */
  width: min-content;         /* current Chrome, Safari; not IE or Edge */
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

Answer 6

আপনি প্রতিটি শব্দকে সিএসএসে লক্ষ্য করতে পারবেন না। তবে, কিছুটা jQuery দিয়ে আপনি সম্ভবত এটি করতে পারেন।

JQuery এর সাহায্যে আপনি প্রতিটি শব্দকে একটি <span>এবং তারপরে CSS সেট স্প্যানে মোড়াতে পারেন display:blockযা এটি নিজের লাইনে রেখে দেয়।

তত্ত্বের ক্ষেত্রে অবশ্যই: পি

Comments

হ্যাঁ, আমি এটির ভয় পেয়েছিলাম। এটি পিএইচপি-তেও করতে পারে তবে এটি একটি কুৎসিত সমাধানের মতো বলে মনে হচ্ছে। ভাবছিলাম কিছু সেখানে হতে পারে :first-childকৌতুক বা সেখানে আউট কিছু ...

— বেন

@ স্টিভ: না, সিএসএস নির্বাচনকারীগণ বর্তমানে কেবল আপনাকে পাঠ্য নোড নয়, এইচটিএমএল উপাদানগুলি নির্বাচন করার অনুমতি দেয়। আমি সিএসএস 3 পাঠ্য মডিউলটি দেখেছি , তবে সেখানে এমন কিছু বলে মনে হচ্ছে না যা একটি উপাদানের প্রতিটি শব্দের পরে বিরতি জোর করে। মার্কের সমাধানটি আপনার সেরা বাজি।

— পল ডি ওয়েট

@ পল, @ মার্ক - আপনার মধ্যে যদি কেউ এর প্রতিনিধি চায় তবে আপনি একটি উত্তর দিতে পারেন এবং আমি এটি গ্রহণ করব। আমি এটিকে মেটা.স্ট্যাকওভারফ্লো / প্রশ্ন / 4৮০১৩/২ প্রতি অনুপলব্ধ (এখনের জন্য) হিসাবে চিহ্নিত করতে চলেছি ।

— বেন

আমি মনে করি মার্ক ইতিমধ্যে এটির একটি উত্তর তৈরি করেছে, যতটা উদ্বিগ্ন আমার সমস্ত প্রতিনিধি তাঁর।

— পল ডি ওয়েট

@ পল - +1 টিম প্লেয়ার লোকটিকে একটি ব্যাজ বা কিছু উপহার দিন :)

— বেন

Answer 7

https://jsfiddle.net/bm3Lfcod/1/

উভয় মাত্রায় নমনীয় একটি বাচ্চাদের সাথে নমনীয় পিতামাতার ধারকটির মধ্যে কাজ করে এমন সমাধানের সন্ধানকারীদের জন্য। যেমন। নাবার বার বোতাম

//the parent (example of what it may be)
div {
  display:flex;
  width: 100%;
}

//The children
a {
  display: inline-block;
}

//text wrapper
span {
  display: table-caption;
}

Comments

স্প্যানটি CSSআপনি দিতে পারেন এমন অন্য কোনও সম্পত্তি দেওয়ার চেষ্টা করুন । এমন কোনও সম্পত্তি বলুন যার কারণ হতে পারেbrowser reflow

— দীপক যাদব

ব্রাউজার রিফ্লো?

— ওনজা

Answer 8

আমি একই সমস্যার মুখোমুখি হয়েছিলাম, এবং এখানকার কোনও বিকল্পই আমাকে সহায়তা করে না। কিছু মেল পরিষেবা নির্দিষ্ট শৈলীর সমর্থন করে না। এখানে আমার সংস্করণটি রয়েছে, যা সমস্যাটি সমাধান করেছে এবং আমি যাচাই করেছিলাম যেখানেই কাজ করে:

<table>
    <tr>
        <td width="1">Gargantuan Word</td>
    </tr>
</table>

অথবা সিএসএস ব্যবহার করে:

<table>
    <tr>
        <td style="width:1px">Gargantuan Word</td>
    </tr>
</table>

Answer 9

সেরা সমাধান word-spacingসম্পত্তি হয়।

যোগ <p>একটি নির্দিষ্ট আকার (উদাহরণ একটি কন্টেইনারে 300px) এবং পরে আপনি ওয়ার্ড-ব্যবধান মান হিসাবে আকার যোগ আছে।

এইচটিএমএল

<div>
 <p>Sentence Here</p>
</div>

সিএসএস

div {
 width: 300px;
}

p {
 width: auto;
 text-align: center;
 word-spacing: 300px;
}

এইভাবে, আপনার বাক্যটি সর্বদা ভাঙ্গা হবে এবং একটি কলামে সেট করা থাকবে তবে অনুচ্ছেদের সাথে গতিশীল হবে।

এখানে একটি উদাহরণ কোডেপেন

Answer 10

আমার ক্ষেত্রে,

    word-break: break-all;

নিখুঁতভাবে কাজ করেছেন, আশা করি এটি আমার মতো অন্য কোনও আগত ব্যক্তিকে সহায়তা করবে।

Comments

আমার কাছ থেকে A -1 কারণ এটি একটি ভুল উত্তর। এটি যদি প্রতিটি চরিত্রের প্রয়োজন হয় তবে লাইনটি ভেঙে দেয়।

— ইমোব