CSS สามารถบังคับให้แบ่งบรรทัดหลังจากแต่ละคำในองค์ประกอบหรือไม่

ฉันกำลังสร้างเว็บไซต์ที่พูดได้หลายภาษากับเจ้าของช่วยฉันด้วยการแปลบางอย่าง วลีที่แสดงบางข้อความต้องมีตัวแบ่งบรรทัดเพื่อรักษารูปแบบของเว็บไซต์

น่าเสียดายที่เจ้าของไม่ใช่คนคอมพิวเตอร์ดังนั้นหากเขาเห็นว่าfoo<br />barมีโอกาสเขาจะแก้ไขข้อมูลในขณะที่เขากำลังแปลอยู่

มีวิธีแก้ปัญหา CSS (นอกเหนือจากการเปลี่ยนความกว้าง) เพื่อใช้กับองค์ประกอบที่จะแตกหลังจากทุกคำ?

(ฉันรู้ว่าฉันสามารถทำสิ่งนี้ใน PHP ได้ แต่ฉันสงสัยว่ามีกลอุบายที่ดีที่ฉันไม่รู้จักใน CSS เพื่อทำสิ่งเดียวกันให้สำเร็จหรืออาจใช้คุณสมบัติ CJK)

แก้ไข

ฉันจะพยายามทำแผนภาพสิ่งที่เกิดขึ้น:

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

คำยาวแบ่งโดยอัตโนมัติคำสั้นไม่ได้ ฉันอยากให้มันเป็นแบบนี้:

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

ใช้

.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>ความกว้างขององค์ประกอบพาเรนต์ (หรือค่าสูงตามอำเภอใจที่ไม่พอดีกับหนึ่งบรรทัด) ด้วยวิธีนี้คุณจึงมั่นใจได้ว่าจะมีตัวแบ่งบรรทัดหลังจากตัวอักษรตัวเดียว ใช้งานได้กับ Chrome / FF / Opera / IE7 + (และอาจแม้แต่ IE6 เพราะรองรับการเว้นวรรคคำเช่นกัน)

คำตอบที่ได้รับจาก @HursVanBloob ทำงานเฉพาะกับคอนเทนเนอร์หลักความกว้างคงที่ แต่ล้มเหลวในกรณีของภาชนะบรรจุของเหลวที่มีความกว้าง

ฉันลองคุณสมบัติมากมาย แต่ไม่มีอะไรทำงานตามที่คาดไว้ ในที่สุดฉันก็ได้ข้อสรุปว่าการให้word-spacingคุณค่าที่ยิ่งใหญ่นั้นใช้ได้ผลดีอย่างสมบูรณ์แบบ

p { word-spacing: 9999999px; }

หรือสำหรับเบราว์เซอร์สมัยใหม่คุณสามารถใช้vwหน่วยCSS (ความกว้างของภาพเป็น% ของขนาดหน้าจอ)

p { word-spacing: 100vw; }

วิธีการแก้ปัญหาทางเลือกอธิบายไว้ในประโยคแยกเป็นหนึ่งคำต่อบรรทัดโดยใช้display:table-caption;กับองค์ประกอบ

ลองใช้white-space: pre-line;ดู มันสร้างตัวแบ่งบรรทัดที่ใดก็ตามที่ตัวแบ่งบรรทัดปรากฏในรหัส แต่ละเว้นช่องว่างพิเศษ (แท็บและช่องว่าง ฯลฯ )

ก่อนอื่นให้เขียนคำของคุณเป็นบรรทัดแยกในรหัสของคุณ:

<div>Short
Word</div>

จากนั้นใช้สไตล์กับองค์ประกอบที่มีคำ

div { white-space: pre-line; }

ระวังแม้ว่าการขึ้นบรรทัดใหม่ทุกครั้งในโค้ดภายในองค์ประกอบจะสร้างการขึ้นบรรทัดใหม่ ดังนั้นการเขียนต่อไปนี้จะส่งผลให้มีการแบ่งบรรทัดพิเศษก่อนคำแรกและหลังคำสุดท้าย:

<div>
    Short
    Word
</div>

มีบทความยอดเยี่ยมเกี่ยวกับCSS Tricksอธิบายคุณลักษณะอื่น ๆ ของ white-space

หากคุณต้องการเลือกโซลูชั่นที่แตกต่างนอกเหนือจากคำตอบที่ให้ ...

วิธีอื่นคือให้ความกว้างของคอนเทนเนอร์เป็น 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>

คุณไม่สามารถกำหนดเป้าหมายแต่ละคำใน CSS อย่างไรก็ตามด้วย jQuery เล็กน้อยคุณอาจจะทำได้

ด้วย jQuery คุณสามารถรวมคำแต่ละคำใน a <span>และจากนั้นตั้งค่า CSS ขยายdisplay:blockที่จะวางไว้ในบรรทัดของตัวเอง

ในทฤษฎีของหลักสูตร: P

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

สำหรับผู้ที่มองหาวิธีการแก้ปัญหาที่ทำงานภายในคอนเทนเนอร์หลักที่ยืดหยุ่นกับเด็ก ๆ ที่มีความยืดหยุ่นทั้งสองมิติ เช่น. ปุ่ม navbar

//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;
}

ฉันประสบปัญหาเดียวกันและไม่มีตัวเลือกใด ๆ ช่วยฉันได้ บริการเมลบางตัวไม่รองรับสไตล์ที่ระบุ นี่คือเวอร์ชันของฉันซึ่งแก้ไขปัญหาและทำงานได้ทุกที่ที่ฉันตรวจสอบ:

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

หรือใช้ CSS:

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

ทางออกที่ดีที่สุดคือword-spacingทรัพย์สิน

เพิ่ม<p>ในคอนเทนเนอร์ที่มีขนาดเฉพาะ (ตัวอย่าง300px) และหลังจากคุณต้องเพิ่มขนาดนั้นเป็นค่าในการเว้นวรรคคำ

HTML

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

CSS

div {
 width: 300px;
}

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

ด้วยวิธีนี้ประโยคของคุณจะถูกทำลายและกำหนดไว้ในคอลัมน์เสมอ แต่ส่วนของย่อหน้าจะเป็นแบบไดนามิก

นี่คือตัวอย่าง Codepen

ในกรณีของฉัน

    word-break: break-all;

ทำงานอย่างสมบูรณ์หวังว่ามันจะช่วยให้ผู้มาใหม่อื่น ๆ เช่นฉัน