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

Question

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.

Nội dung chính Show

Làm cách nào để phá vỡ một dòng sau từ đầu tiên trong CSS?
Làm cách nào để buộc một dòng phá vỡ trong CSS?

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,8K54 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 line break after word - ngắt dòng css sau 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.7k9 Huy hiệu vàng48 Huy hiệu bạc97 Huy hiệu Đồng9 gold badges48 silver badges97 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.5965 huy hiệu vàng29 Huy hiệu bạc47 Huy hiệu đồng5 gold badges29 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.6K15 Huy hiệu vàng108 Huy hiệu bạc148 Huy hiệu đồng15 gold badges108 silver badges148 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,8K48 Huy hiệu vàng173 Huy hiệu bạc219 Huy hiệu đồng48 gold badges173 silver badges219 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.5504 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 cách nào để phá vỡ một dòng sau từ đầu tiên trong CSS?

Bạn có thể chèn phá vỡ dòng thông qua phần tử giả nhưng là một phần tử nội tuyến.Việc phá vỡ dòng sẽ không làm gì cả!Giống như một sự phá vỡ dòng thực sự sẽ không làm gì cả.Chúng ta có thể buộc dòng phá vỡ đó để hoạt động bằng cách làm cho không gian trắng có ý nghĩainsert line breaks via pseudo element But… the is an inline element. The line break won't do anything! Just like a real line break won't do anything. We can force that line break to work by making white space meaningful…

Làm cách nào để buộc một dòng phá vỡ trong CSS?

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).

programming css word-break css Word-wrap CSS word-break trong css

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

Làm cách nào để phá vỡ một dòng sau từ đầu tiên trong CSS?

Làm cách nào để buộc một dòng phá vỡ 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