আমি কীভাবে একটি নির্দিষ্ট প্রস্থের স্প্যানে দীর্ঘ পাঠ / শব্দটি মোড়ানো বা ভাঙ্গতে পারি?

Question

আমি একটি নির্দিষ্ট প্রস্থের সাথে একটি স্প্যান তৈরি করতে চাই যা আমি স্প্যানটিতে যখন কোনও জিনিস টাইপ করি তখন <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>ফাঁকা স্থানবিহীন পাঠ্যের একটি দীর্ঘ স্ট্রিং, শব্দ (গুলি) বিরতি বা পরবর্তী লাইনে মোড়কে।

কোন ধারনা?

Answer 1

আপনি CSS বৈশিষ্ট্যটি ব্যবহার করতে পারেন word-wrap:break-word;, যা শব্দগুলি আপনার স্প্যান প্রস্থের জন্য খুব দীর্ঘ হলে ভেঙে দেবে।

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

Comments

অ্যাসপেট লেবেল নিয়ন্ত্রণের জন্য ভাল কাজ করে। ধন্যবাদ!

— এটল্ডস

যোগ করার white-space: normalফলে বাইরের স্টাইলিংগুলিকে ওভাররাইড করতে সাহায্য করতে পারে যা পেতে পারে :) .. inline-blockপাশাপাশি কাজ করেblock

— কাতিয়া

একটি ব্লক উপাদানের ভিতরে থাকা দুটি স্প্যান ভাঙ্গার বিষয়ে কী?

— ড্যানিয়েল স্প্রিঞ্জার

এই উত্তরটি ব্যবহার করার পরেও যারা এখনও সমস্যায়

— পড়েছেন

কোথায় ভাঙ্গতে হবে তা জানতে

— এটির

Answer 2

সিএসএস যুক্ত করে নিম্নলিখিত ব্যবহার করে দেখুন white-space:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}

Comments

ধন্যবাদ! আমি বুঝতে পারি না কেন আমার লেখাটি কখনই মোড়ানো হয় না! সাদা স্থান কারণ ছিল।

— mdiehl13

আমার ইস্যুটিও একবার স্থির করা হয়েছিল:white-space: normal

— মেজর বামার

আপনার যদি সাদা-স্থান এবং মোড়কের

— Hritik

Answer 3

এটার মত

ডেমো

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}

Comments

আমার বন্ধুটি যখন স্প্যান প্রস্থ করা হয় আমি চাই: 50px; আমার স্প্যানের মানগুলি কেবল 50px এ দেখায় এবং অন্যান্য মানগুলি পরের লাইনে যায় এবং 50px এ দেখায় !!!

— محمد کثیری

@ ম্যামাল 10 ম্যাক্সাইম লরেন্টের সমাধানটি পরীক্ষা করে দেখুন।

— মিঃগ্রিন

Answer 4

ডিফল্টরূপে একটি spanএকটি হল inlineউপাদান ... যাতে ডিফল্ট আচরণ নয়।

আপনি নিজের সিএসএসে spanযুক্ত করে সেই আচরণটি করতে পারেন display: block;।

span {
    display: block;
    width: 100px;
}

Answer 5

এটা চেষ্টা কর

span {
    display: block;
    width: 150px;
}

Answer 6

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

সম্পূর্ণ স্প্যানটিকে প্রদর্শন হিসাবে সংজ্ঞায়িত করে : ইনলাইন-ব্লক আপনার ছবিগুলি প্রদর্শন করতে খুব কষ্ট হতে পারে।

সুতরাং আমি এর মতো স্প্যান সংজ্ঞায়িত করতে পছন্দ করি:

span {
  display:block;
  width:150px;
  word-wrap:break-word;      
}
p span, a span,
h1 span, h2 span, h3 span, h4 span, h5 span {
  display:inline-block;
}
img{
  display:block;
}

Answer 7

আমার ক্ষেত্রে, প্রদর্শন: ব্লকটি নকশাকে উদ্দেশ্য হিসাবে ভাঙ্গছিল।

max-widthসম্পত্তি শুধু আমাকে সংরক্ষণ করা হয়েছে।

এবং স্টাইলিংয়ের জন্য, আপনি text-overflow: ellipsisপাশাপাশি ব্যবহার করতে পারেন ।

আমার কোড ছিল

max-width: 255px
overflow:hidden