CSS có thể buộc ngắt dòng sau mỗi từ trong một phần tử không?

Tôi đang xây dựng một trang web đa ngôn ngữ, với chủ sở hữu giúp tôi một số bản dịch. Một số cụm từ được hiển thị cần ngắt dòng để duy trì phong cách của trang web.

Thật không may, chủ sở hữu không phải là một anh chàng máy tính, vì vậy nếu anh ta thấy foo<br />barcó cơ hội anh ta sẽ sửa đổi dữ liệu bằng cách nào đó khi anh ta dịch.

Có một giải pháp CSS (bên cạnh việc thay đổi độ rộng) để áp dụng cho một phần tử sẽ bị hỏng sau mỗi từ không?

(Tôi biết tôi có thể làm điều này trong PHP, nhưng tôi tự hỏi liệu có một mẹo nhỏ nào tôi không biết về CSS để thực hiện điều tương tự, có lẽ là trong các tính năng của CJK.)

BIÊN TẬP

Tôi sẽ cố gắng vẽ sơ đồ những gì đang xảy ra:

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

Từ dài tự động ngắt, từ ngắn không. Tôi muốn nó trông như thế này:

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

Sử dụng

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

trong đó <parent-width>chiều rộng của phần tử cha (hoặc giá trị cao tùy ý không khớp với một dòng). Bằng cách đó, bạn có thể chắc chắn rằng thậm chí còn có một dấu ngắt dòng sau một chữ cái. Hoạt động với Chrome / FF / Opera / IE7 + (và có thể cả IE6 vì nó cũng hỗ trợ khoảng cách từ).

Câu trả lời được đưa ra bởi @HursVanBloob chỉ hoạt động với vùng chứa cha mẹ có chiều rộng cố định, nhưng không thành công trong trường hợp thùng chứa chiều rộng chất lỏng .

Tôi đã thử rất nhiều tài sản, nhưng không có gì làm việc như mong đợi. Cuối cùng tôi đã đi đến một kết luận rằng việc đưa ra word-spacingmột giá trị rất lớn hoạt động hoàn toàn tốt.

p { word-spacing: 9999999px; }

hoặc, đối với các trình duyệt hiện đại, bạn có thể sử dụng vwđơn vị CSS (chiều rộng trực quan tính bằng% kích thước màn hình).

p { word-spacing: 100vw; }

Một giải pháp thay thế được mô tả trên Câu riêng biệt cho một từ trên mỗi dòng , bằng cách áp dụng display:table-caption;cho thành phần

Hãy thử sử dụng white-space: pre-line;. Nó tạo ra một ngắt dòng bất cứ nơi nào một ngắt dòng xuất hiện trong mã, nhưng bỏ qua khoảng trắng thừa (các tab và khoảng trắng, v.v.).

Đầu tiên, viết từ của bạn trên các dòng riêng biệt trong mã của bạn:

<div>Short
Word</div>

Sau đó áp dụng kiểu cho phần tử chứa các từ.

div { white-space: pre-line; }

Hãy cẩn thận , mỗi ngắt dòng trong mã bên trong phần tử sẽ tạo ra ngắt dòng. Vì vậy, viết những điều sau đây sẽ dẫn đến ngắt dòng thêm trước từ đầu tiên và sau từ cuối cùng:

<div>
    Short
    Word
</div>

Có một bài viết tuyệt vời về Thủ thuật CSS giải thích các thuộc tính khoảng trắng khác.

Nếu bạn muốn có thể chọn từ các giải pháp khác nhau, ngoài các câu trả lời đã cho ...

Một phương pháp khác là cung cấp cho vùng chứa có chiều rộng bằng 0 và đảm bảo có thể nhìn thấy tràn. Sau đó, mỗi từ sẽ tràn ra khỏi nó và sẽ nằm trên một dòng riêng.

div {
  width: 0;
  overflow: visible;
}

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

Hoặc bạn có thể sử dụng một trong những widthgiá trị mới được đề xuất , miễn là chúng vẫn tồn tại vào thời điểm bạn đọc nó.

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>

Bạn không thể nhắm mục tiêu từng từ trong CSS. Tuy nhiên, với một chút jQuery có lẽ bạn có thể.

Với jQuery, bạn có thể gói từng từ trong một chuỗi <span>và sau đó đặt chuỗi CSS để display:blockđặt nó trên dòng riêng của nó.

Về lý thuyết tất nhiên: P

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

Đối với những người tìm kiếm một giải pháp hoạt động trong một thùng chứa cha mẹ linh hoạt với một đứa trẻ linh hoạt ở cả hai chiều. ví dụ. nút điều hướng.

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

Tôi đã đối mặt với cùng một vấn đề, và không có lựa chọn nào ở đây giúp tôi. Một số dịch vụ thư không hỗ trợ các kiểu được chỉ định. Đây là phiên bản của tôi, đã giải quyết vấn đề và hoạt động ở mọi nơi tôi đã kiểm tra:

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

HOẶC sử dụng CSS:

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

Giải pháp tốt nhất là word-spacing tài sản.

Thêm <p>vào một thùng chứa với một kích thước cụ thể (ví dụ 300px) và sau khi bạn phải thêm kích thước đó làm giá trị trong khoảng cách từ.

HTML

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

CSS

div {
 width: 300px;
}

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

Theo cách này, câu của bạn sẽ luôn bị phá vỡ và được đặt trong một cột, nhưng phần của đoạn sẽ là động.

Dưới đây là một ví dụ Codepen

Trong trường hợp của tôi,

    word-break: break-all;

làm việc một cách hoàn hảo, hy vọng nó sẽ giúp ích cho bất kỳ người mới nào khác như tôi.