Hướng dẫn css break line after word - css ngắt dòng sau từng từ

Question

209

Nội dung chính Show

Làm thế nào để bạn chia một từ cho dòng tiếp theo trong CSS?
Làm cách nào để tạo dòng
Làm thế nào để tôi giữ các dòng phá vỡ trong CSS?
Làm cách nào để buộc một dòng mới trong CSS?

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

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ừ hiển thị cần phá vỡ 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 nhìn thấy

.one-word-per-line {
    word-spacing: ; 
}

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

1 thì có cơ hội anh ta sẽ sửa đổi dữ liệu bằng cách nào đó khi anh ta dịch.

Có giải pháp CSS (ngoài việc thay đổi chiều rộng) để áp dụng cho một phần tử sẽ bị phá vỡ sau mỗi từ?

.

CHỈNH SỬA

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

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

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

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

Paul D. Waite

94,6K54 Huy hiệu vàng196 Huy hiệu bạc266 Huy hiệu Đồng54 gold badges196 silver badges266 bronze badges

Đã hỏi ngày 18 tháng 11 năm 2010 lúc 8:32Nov 18, 2010 at 8:32

Hướng dẫn css break line after word - css ngắt dòng sau từng từ

5

Sử dụng

.one-word-per-line {
    word-spacing: ; 
}

.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 đó

.one-word-per-line {
    word-spacing: ; 
}

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

2 là chiều rộng của phần tử cha (hoặc giá trị cao tùy ý không phù hợ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ó một dòng phá vỡ sau một chữ cái. Hoạt động với Chrome/FF/Opera/IE7+ (và thậm chí có thể IE6 vì nó cũng hỗ trợ khoảng cách từ).

Johannchopin

12.6K9 Huy hiệu vàng47 Huy hiệu bạc94 Huy hiệu Đồng9 gold badges47 silver badges94 bronze badges

Đã trả lời ngày 31 tháng 5 năm 2012 lúc 9:50May 31, 2012 at 9:50

Hurs Van Bloobhurs Van BloobHurs van Bloob

3.0121 Huy hiệu vàng13 Huy hiệu bạc2 Huy hiệu đồng1 gold badge13 silver badges2 bronze badges

11

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

Tôi đã thử rất nhiều tài sản, nhưng không có gì hoạt động như mong đợi. Cuối cùng tôi đã đi đến một kết luận rằng cho

.one-word-per-line {
    word-spacing: ; 
}

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

3 một giá trị rất lớn hoạt động hoàn toàn tốt.
.one-word-per-line { word-spacing: ; } .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; }
3 a very huge value works perfectly fine.

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 đơn vị CSS

.one-word-per-line {
    word-spacing: ; 
}

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

4 (chiều rộng trực quan theo % kích thước màn hình).

p { word-spacing: 100vw; }

Đã trả lời ngày 27 tháng 5 năm 2014 lúc 12:15May 27, 2014 at 12:15

Deepak Yadavdeepak YadavDeepak Yadav

6.5865 huy hiệu vàng28 Huy hiệu bạc47 Huy hiệu đồng5 gold badges28 silver badges47 bronze badges

8

Hãy thử sử dụng

.one-word-per-line {
    word-spacing: ; 
}

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

5. Nó tạo ra một sự phá vỡ dòng bất cứ nơi nào một sự phá vỡ dòng xuất hiện trong mã, nhưng bỏ qua khoảng trắng thêm (tab và không gian, v.v.).

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

Short
Word

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

div { white-space: pre-line; }

Mặc dù vậy, hãy cẩn thận, mọi dòng ngắt trong mã bên trong phần tử sẽ tạo ra một ngắt dòng. Vì vậy, việc viết những điều sau đây sẽ dẫn đến một dòng phá vỡ thêm trước từ đầu tiên và sau từ cuối cùng: though, every line break in the code inside the element will create a line break. So writing the following will result in an extra line break before the first word and after the last word:


    Short
    Word

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

Đã trả lời ngày 2 tháng 11 năm 2012 lúc 21:37Nov 2, 2012 at 21:37

NassnassNass

6497 Huy hiệu bạc12 Huy hiệu Đồng7 silver badges12 bronze badges

6

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 thay thế là cung cấp cho container chiều rộng 0 và để đảm bảo hiển thị tràn. Sau đó, mỗi từ sẽ tràn ra khỏi nó và sẽ nằm trên dòng riêng của nó.

div {
  width: 0;
  overflow: visible;
}

Short Word

Gargantuan Word

Hoặc bạn có thể sử dụng một trong những giá trị

.one-word-per-line {
    word-spacing: ; 
}

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

6 mới được đề xuất, miễn là những giá trị vẫn tồn tại vào thời điểm bạn đọc này.

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

0

Short Word

Gargantuan Word

Đã trả lời ngày 21 tháng 1 năm 2018 lúc 19:59Jan 21, 2018 at 19:59

Ông Listermr ListerMr Lister

44.5K15 Huy hiệu vàng107 Huy hiệu bạc146 Huy hiệu đồng15 gold badges107 silver badges146 bronze badges

2

.one-word-per-line {
    word-spacing: ; 
}

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

7 là một yếu tố nội tuyến và tôi đang thêm một

.one-word-per-line {
    word-spacing: ; 
}

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

8 để đưa ra chiều rộng cho phần tử

.one-word-per-line {
    word-spacing: ; 
}

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

9,

p { word-spacing: 9999999px; }

0 là giá trị/chiều rộng của từ nhỏ nhất trong văn bản/câu của bạn.

Nếu bạn sử dụng

p { word-spacing: 9999999px; }

0, "chiều rộng" sẽ là từ dài nhất của bạn. Trong trường hợp này

p { word-spacing: 9999999px; }

2 là từ dài hơn của bạn. Nhưng nếu bạn có các từ khác nhau như

p { word-spacing: 9999999px; }

3 hoặc vài từ 2/3 thì từ này sẽ phù hợp với cùng một dòng.

Nếu bạn muốn giữ hành vi trên từ, bạn có thể đưa ra một chiều rộng cố định, ví dụ

p { word-spacing: 9999999px; }

4.

Kiểm tra thêm các ví dụ trong Codepen.

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

2

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

3

Đã trả lời ngày 21 tháng 6 năm 2021 lúc 10:48Jun 21, 2021 at 10:48

Claudiuclaudiuclaudiu

1292 Huy hiệu bạc6 Huy hiệu Đồng2 silver badges6 bronze badges

1

Giải pháp tốt nhất là thuộc tính

.one-word-per-line {
    word-spacing: ; 
}

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

3.

Thêm

p { word-spacing: 9999999px; }

6 vào một thùng chứa có kích thước cụ thể (ví dụ

p { word-spacing: 9999999px; }

7) và sau khi bạn phải thêm kích thước đó làm giá trị trong khoảng cách từ.

HTML

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

4

CSS

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

5

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

Đây là một ví dụ codepen Codepen

Ben

52.5K48 Huy hiệu vàng171 Huy hiệu bạc218 Huy hiệu đồng48 gold badges171 silver badges218 bronze badges

Đã trả lời ngày 31 tháng 7 năm 2019 lúc 10:52Jul 31, 2019 at 10:52

Cosimo Wisecosimo khôn ngoanCosimo wiSe

1132 Huy hiệu bạc7 Huy hiệu đồng2 silver badges7 bronze badges

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 bạn có thể có thể.

Với jQuery, bạn có thể bọc từng từ trong

.one-word-per-line {
    word-spacing: ; 
}

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

7 và sau đó CSS đặt nhịp thành

p { word-spacing: 9999999px; }

9 sẽ đặt nó lên dòng riêng của nó.

Tất nhiên về lý thuyết: p

Matt

2632 Huy hiệu vàng10 Huy hiệu bạc34 Huy hiệu đồng2 gold badges10 silver badges34 bronze badges

Đã trả lời ngày 18 tháng 11 năm 2010 lúc 8:43Nov 18, 2010 at 8:43

MarkmarkMark

3976 Huy hiệu bạc17 Huy hiệu đồng6 silver badges17 bronze badges

5

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 trẻ em linh hoạt ở cả hai chiều. ví dụ. Các nút Navbar.

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

6

Đã trả lời ngày 5 tháng 4 năm 2017 lúc 11:24Apr 5, 2017 at 11:24

OnzaozaOnza

1.5114 Huy hiệu vàng15 Huy hiệu bạc31 Huy hiệu đồng4 gold badges15 silver badges31 bronze badges

2

Tôi đã phải đối mặt với vấn đề tương tự, 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:

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

7

Hoặc sử dụng CSS:

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

8

Vòng tròn b

1.5562 huy hiệu vàng25 Huy hiệu bạc42 Huy hiệu đồng2 gold badges25 silver badges42 bronze badges

Đã trả lời ngày 9 tháng 1 năm 2019 lúc 17:35Jan 9, 2019 at 17:35

Tôi đã làm điều này trên một dự án mà khách hàng muốn tiêu đề 3 từ trên một dòng khác. Về cơ bản, bạn tăng các không gian với CSS sử dụng không gian trắng để tách các dòng.

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

9

Đã trả lời ngày 9 tháng 7 lúc 11:48Jul 9 at 11:48

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

.one-word-per-line {
    word-spacing: ; 
}

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

0

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

Đã trả lời ngày 28 tháng 1 năm 2020 lúc 19:17Jan 28, 2020 at 19:17

1

Làm thế nào để bạn chia một từ cho dòng tiếp theo trong CSS?

Thuộc tính phá vỡ từ trong CSS được sử dụng để chỉ định cách một từ nên bị phá vỡ hoặc phân chia khi đạt đến cuối dòng. Thuộc tính bao bọc từ được sử dụng để phân chia/phá vỡ các từ dài và quấn chúng vào dòng tiếp theo. Word-Break: Break-all; Nó được sử dụng để phá vỡ các từ ở bất kỳ ký tự nào để ngăn chặn tràn.word-wrap property is used to split/break long words and wrap them into the next line. word-break: break-all; It is used to break the words at any character to prevent overflow.

Làm cách nào để tạo dòng

Một sự phá vỡ dòng có thể được thêm vào trong HTML, chỉ sử dụng CSS, bằng cách sử dụng pseudo-class :: sau hoặc :: trước. Trong bảng kiểu, chúng tôi sử dụng các lớp giả này, với lớp HTML hoặc ID, trước hoặc sau nơi chúng tôi muốn chèn một dòng phá vỡ. Trong MyClass :: Sau: Đặt thuộc tính Nội dung thành "\ A" (ký tự dòng mới).employing the pseudo-class ::after or ::before . In the stylesheet, we use these pseudo-classes, with the HTML class or id, before or after the place where we want to insert a line-break. In myClass::after : Set the content property to "\a" (the new-line character).

Làm thế nào để tôi giữ các dòng phá vỡ trong CSS?

Nếu bạn muốn văn bản của mình tràn ra ranh giới của cha mẹ, bạn nên sử dụng Pre làm thuộc tính Whitespace của CSS.Sử dụng không gian trắng: Bao bọc trước vẫn bảo tồn các dòng và không gian mới.Vui thích!Using white-space: pre wraps still preserves newlines and spaces. Enjoy!

Làm cách nào để buộc một dòng mới trong CSS?

Có hai phương pháp để buộc các yếu tố nội tuyến để thêm dòng mới.Sử dụng thuộc tính hiển thị: Một phần tử cấp khối bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn cho nó.Sử dụng ký tự trả về vận chuyển (\ A): Chúng ta có thể thêm một dòng mới bằng cách sử dụng :: trước hoặc :: sau các yếu tố giả.Using display property: A block-level element starts on a new line, and takes up the entire width available to it. Using carriage return character (\A): We can add a new-line by using the ::before or ::after pseudo-elements.

programming css word-break tailwind word-break trong css CSS word-break

Hướng dẫn css break line after word - css ngắt dòng sau từng từ

Làm thế nào để bạn chia một từ cho dòng tiếp theo trong CSS?

Làm cách nào để tạo dòng

Làm thế nào để tôi giữ các dòng phá vỡ trong CSS?

Làm cách nào để buộc một dòng mới trong CSS?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội