Css перенос слов с дефисом: Как сделать перенос слов через дефис в тексте черес CSS? — Хабр Q&A – html — перенос слов по дефису

html - перенос слов по дефису

Stack Overflow на русском

Loading…

  1. 0
  2. +0
    • Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
    • Справка Подробные ответы на любые возможные вопросы
    • Мета Обсудить принципы работы и политику сайта
    • О нас Узнать больше о компании Stack Overflow
    • Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
  3. Войти Регистрация
  4. текущее сообщество

    • Stack Overflow на русском

css перенос слов с дефисами

У меня есть строка текста в div, которая может выглядеть следующим образом:

A really long user defined team Name 1 (7-0)

Где 7-0 будет рекордом команды. Это находится в div определенной ширины, и иногда браузер любит разбивать дефис, который нежелателен, потому что он должен рассматриваться так же, как слово. Так что я мог бы закончить с:

A really long user defined team Name 1 (7
-0)

Есть ли способ заставить работать перенос слов, где он обрабатывает дефис, как если бы это был обычный символ, а не место, которое должно поддерживать разрыв?

css word-wrap

Поделиться Источник user417918     14 августа 2011 в 04:39

4 Ответов



6

Хотя принятый ответ делает эту работу просто отлично, вы должны рассмотреть возможность использования несколько более очевидного стиля css для этого:

CSS:

.together {
    white-space: nowrap;
}

HTML:

<p>A really long user defined team Name 1 <span>(7-0)</span></p>

Поделиться NGLN     14 августа 2011 в 05:43



3

http://jsfiddle.net/zfsYK/4/

вот, держи..

Я просто завернул текст, который вы не хотите разбивать в div-наборе на display:inline ..

кажется, я не могу заставить его сломаться сейчас

Поделиться samccone     14 августа 2011 в 04:44



2


В зависимости от контекста решение этой проблемы как проблемы содержания может быть более уместным, чем решение ее на уровне представления. Предполагая, что вы хотите, чтобы это никогда не нарушалось переносом слов, даже если кто-то скопировал/вставил его с вашего сайта и в другое место, замените дефис на неразрывный дефис. Unicode U+02011, который может быть вставлен в HTML, как A really long user defined team Name 1 (7&#8209;0) .

Поделиться yeahforbes     14 сентября 2017 в 19:18



0

Для тех, кто ищет решение. Вы должны применить white-space: nowrap к каждому из ваших дефисных слов в тексте. Я сделал это для себя, может быть, это поможет:

https://jsfiddle.net/ooj6kmx1/21/

С уважением

Поделиться Guillermo Gimenez     25 сентября 2017 в 16:06


Похожие вопросы:


css перенос слов с многоточием

Используя только CSS, я хочу как перенос слов, так и многоточие, когда контейнер заполняется вертикально. Согласно исследованиям, я могу иметь только многоточие, если white-space: nowrap -что даст...


Ограничить перенос слов по определенному столбцу таблицы с помощью CSS

Я хотел бы ограничить перенос слов по тексту в одном столбце таблицы. В принципе, я хочу, чтобы эквивалент white-space: nowrap на каждой ячейке во втором столбце таблицы. Дело в том, что я не могу...


Перенос слов в ячейку таблицы

Я пытаюсь применить перенос слов в ячейку таблицы, но это не работает. Строка обертывается, если имя файла содержит пробел, но если пространства нет, моя таблица выходит из div. Я также пробовал...


Перенос слов не работает должным образом

Я пытаюсь выяснить, почему перенос слов не работает должным образом на этой странице для класса div: .gce-page-list http://metaphysicalerotica.com/events / Похоже, что тема добавила тег pre и code,...


UITextView перенос символов, но не перенос слов

У меня есть UITextView, который я хотел бы отключить перенос слов, но сохранить перенос символов включен. В принципе, я хотел бы иметь длинную строку 200+ символов, которая все еще обертывается в...


Перенос слов с непрерывной точкой(.) с помощью css

Я пытаюсь сделать wordwrap с любыми символами, используя css . Вот css , что я использую .wordbreak { white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ white-space: -webkit-pre-wrap;...


Захват слова с дефисами regex

В настоящее время у меня есть эта строка RED-CURRENT_FORD-something.something Мне нужно поймать слово между дефисами. В данном случае слово CURRENT_FORD У меня есть следующее написано...


CSS: в таблице HTML перенос слов не работает с float: left

У меня есть таблица с тремя столбцами, и я хочу установить текстовый фон в ячейке на основе длины содержимого. Но когда я устанавливаю float: left, перенос слов не работает хорошо. table {...


Перенос слов с Monodevelop.texteditor

Поддерживает ли Monodevelop.texteditor перенос слов? Монодевелоп сам по себе, похоже, не имеет способа включить wordwrap, это правда? Спасибо!


CSS перенос слов в div

У меня есть div с шириной 250px. Когда внутренний текст шире этого, я хочу, чтобы он сломался. Div-это float: слева и теперь имеет переполнение. Я хочу, чтобы полоса прокрутки исчезла, используя...


html - Как сделать перенос через дефис слов в блоке?

Stack Overflow на русском

Loading…

  1. 0
  2. +0
    • Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
    • Справка Подробные ответы на любые возможные вопросы
    • Мета Обсудить принципы работы и политику сайта
    • О нас Узнать больше о компании Stack Overflow
    • Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
  3. Войти Регистрация
  4. текущее сообщество

    • Stack Overflow на русском справка чат

CSS перенос слов в div

У меня есть div с шириной 250px. Когда внутренний текст шире этого, я хочу, чтобы он сломался. Div-это float: слева и теперь имеет переполнение. Я хочу, чтобы полоса прокрутки исчезла, используя перенос слов. Как я могу этого достичь?

<div>
<div>
    <div>
        <asp:Label runat="server"></asp:Label>
    </div>
    <div>
        <asp:ImageButton runat="server" 
            ImageUrl="Graphics/close.png" 
            BorderWidth="0" ToolTip="Sluit handboek" />
    </div>
</div>
<asp:TreeView runat="server" RootNodeStyle-CssClass="RootNode">
    <Nodes>

    </Nodes>
</asp:TreeView>
</div>

CSS:

#Treeview
{
padding-right: 5px;
width: 250px;
height: 100%;
float: left;
border-right: solid 1px black;
overflow-x: scroll;
}
css html word-wrap

Поделиться Источник Martijn     02 февраля 2009 в 08:09

7 Ответов



102

Как сказал Эндрю, ваш текст должен быть именно таким.

Есть один пример, который я могу придумать, который будет вести себя так, как вы предлагаете, и это если у вас есть набор свойств whitespace.

Смотрите, если у вас нет следующего в вашем CSS где-нибудь:

white-space: nowrap

Это приведет к тому, что текст будет продолжаться на одной и той же строке до тех пор, пока не будет прерван разрывом строки.

OK, мои извинения, не уверен, что отредактировал или добавил разметку позже (сначала не видел ее).

Свойство overflow-x является причиной появления полосы прокрутки. Удалите это, и div настроится настолько высоко, насколько это необходимо, чтобы содержать весь ваш текст.

Поделиться Jayx     02 февраля 2009 в 08:24



99

Или просто использовать

word-wrap: break-word;

поддерживается в браузерах IE 5.5+, Firefox 3.5+ и WebKit, таких как Chrome и Safari.

Поделиться Jc Figueroa     06 декабря 2011 в 19:16



16

попробуйте white-space:normal; это переопределит наследование white-space:nowrap;

Поделиться gordon     29 марта 2017 в 20:01



7

Довольно трудно сказать определенно, не видя, как выглядит отрисованный html и какие стили применяются к элементам внутри treeview div, но то, что сразу бросается мне в глаза, - это

overflow-x: scroll;

Что произойдет, если вы удалите это?

Поделиться Andrew     02 февраля 2009 в 08:27



3

Вы можете использовать:

overflow-x: auto; 

Если вы установите 'auto' в overflow-x, прокрутка будет отображаться только тогда, когда внутренний размер больше, чем область DIV

Поделиться ''     04 марта 2009 в 19:51



2

Я немного удивлен, что он не делает этого просто так. Может ли быть еще один элемент внутри div, ширина которого установлена на что-то большее, чем 250?

Поделиться Andrew     02 февраля 2009 в 08:14



1

Установка только ширины и свойств float css позволит получить панель обертывания. Пример following работает просто отлично:

<div>
Pellentesque feugiat tempor elit. Ut mollis lacinia quam. 
Sed pharetra, augue aliquam   ornare vestibulum, metus massa
laoreet tellus, eget iaculis lacus ipsum et diam. 
</div>

Может быть, есть и другие стили, которые изменяют внешний вид?

Поделиться Aleris     02 февраля 2009 в 08:17


Похожие вопросы:


Перенос слов в ячейку таблицы

Я пытаюсь применить перенос слов в ячейку таблицы, но это не работает. Строка обертывается, если имя файла содержит пробел, но если пространства нет, моя таблица выходит из div. Я также пробовал...


CSS перенос текста с переполнением скрытый div не работает?

В моем css я пишу стиль класса overflow : hidden . мой div содержит небольшое изображение и некоторый текст абзаца. если переполнение скрыто в том смысле, что перенос слов не работает. если я удалю,...


Перенос слов не работает должным образом

Я пытаюсь выяснить, почему перенос слов не работает должным образом на этой странице для класса div: .gce-page-list http://metaphysicalerotica.com/events / Похоже, что тема добавила тег pre и code,...


css перенос слов с многоточием

Используя только CSS, я хочу как перенос слов, так и многоточие, когда контейнер заполняется вертикально. Согласно исследованиям, я могу иметь только многоточие, если white-space: nowrap -что даст...


div contenteditable и перенос слов с элементами span

Когда у меня есть теги span в contenteditable div, меняется перенос слов. Вот это fiddle. http://jsfiddle.net/knpB9 / <div contenteditable=true style=width:168px; border:1px solid...


CSS: в таблице HTML перенос слов не работает с float: left

У меня есть таблица с тремя столбцами, и я хочу установить текстовый фон в ячейке на основе длины содержимого. Но когда я устанавливаю float: left, перенос слов не работает хорошо. table {...


Как изменить ширину div, если произошел перенос слов?

Если это возможно, чтобы изменить размер элемента div, когда произошло перенос слов. Для демонстрации пусть используют fiddle из аналогичного вопроса: <div class=mypost> <div...


Горизонтальное выравнивание элементов в div и перенос слов

HTML это <div class=jfmfs-friend-container> <div class=jfmfs-friend > <input class=friend-checkbox type=checkbox> <img src=/picture> <div class=friend-name>Test...


перенос слов очень длинные строки

Как можно отобразить длинную строку, адрес веб-сайта, слово или набор символов с автоматическими разрывами строк, чтобы сохранить ширину div? Я думаю, что это своего рода словоблудие. Обычно...


css перенос слов с дефисами

У меня есть строка текста в div, которая может выглядеть следующим образом: A really long user defined team Name 1 (7-0) Где 7-0 будет рекордом команды. Это находится в div определенной ширины, и...


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *