C # - Как я могу вырезать строку в ее конце, чтобы поместиться в div? - PullRequest
3 голосов
/ 18 марта 2009

Я делаю список последних новостей. Итак, он покажет что-то вроде этого:

- Take a look at the new Volks...
- John Doe is looking for a jo...
- Microsoft is launching the n...

Итак, приведенный выше список показывает только заголовок новостей, а длина каждой новости ограничена 25 символами. Но это не очень хорошо работает ... например, если вы наберете 25 М, это взорвет мой div.

Мне сказали, что есть способ вычислить длину строки и автоматически поместить ее в элемент div.

Кто-нибудь знает, как это сделать?

спасибо !!

Ответы [ 7 ]

3 голосов
/ 18 марта 2009

«text-overflow: ellipsis» - это то, что вы хотите, но не все поддерживают это. Подробнее здесь ...

1 голос
/ 18 марта 2009

Я думаю, вы говорите об использовании MeasureString() класса System.Drawing.Gaphics класса.

Однако для этого необходимо создать графический объект, соответствующий характеристикам шрифта вашей веб-страницы. Но , ваш серверный процесс не должен ничего знать об элементах стиля веб-страницы, которые должны обрабатываться таблицей CSS.

1 голос
/ 18 марта 2009

Один очень простой способ предотвратить «взрыв элемента div» - это использовать стиль css для установки overflow элемента div для прокрутки или скрытия дополнительного текста вместо растяжения для его размещения.

1 голос
/ 18 марта 2009

Я думаю, вы хотите использовать CSS для этого.

word-wrap:break-word;

должен это сделать

0 голосов
/ 17 января 2012

Как уже упоминали другие, вы можете измерить строки в толстых клиентских приложениях, используя System.Drawing.Graphics.MeasureString, но, поскольку вы упоминаете, что хотите разместить его в теге HTML div, было бы целесообразно разрешить браузеру обрабатывать пользовательский интерфейс с помощью CSS.

<html>
<head>
    <title>C# - How can I cut a string at its end to fit in a div? </title>
    <style type="text/css">
        .ellipsis li
        {
           display: block; 
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 166px;
        }
    </style>
</head>
<body>
    <ul class="ellipsis">
        <li>Take a look at the new Volksxxxxx</li>
        <li>John Doe is looking for a joxxxxx</li>
        <li>Microsoft is launching the nxxxxx</li>
    </ul>
</body>
</html>

Я использовал тег неупорядоченного списка (UL) вместо div, поскольку ваш список образцов начинается с символа маркера. Подобный CSS будет применяться к тегам DIV. И хотя весь браузер может быть создан для обрезки содержимого, не все браузеры поддерживают нестандартное переполнение текста: стиль многоточия.

0 голосов
/ 19 марта 2009

На самом деле это не проблема на стороне сервера, поскольку сервер не должен знать, какие шрифты используют люди. Вы можете сделать это с помощью Ajax - отправить шрифт на сервер, рассчитать ширину (как упоминал Джеймс Керран) и вернуть правильные строки. Однако на сервере могут быть установлены те же шрифты, и вам необходимо рассчитать отступы и поля на стороне сервера.

Я могу представить несколько вариантов на стороне клиента:

  1. Обернуть каждую строку с интервалом. Пролет будет автоматически расширяться до ширины линии. Используя jQuery или ваш любимый javascript, вы можете удалять символы, пока ширина не будет в порядке. (вы можете выполнить своего рода бинарный поиск, где на каждом этапе вы добавляете многоточие и проверяете ширину)
  2. Easy - Оберните каждую строку div с фиксированной шириной и установите его overflow:hidden, и добавьте многоточие после div. Это будет сокращать буквы, а когда вы получите короткий текст, он все равно покажет многоточие.
  3. Слишком просто - используйте шрифт фиксированной ширины (они в основном некрасивы).
0 голосов
/ 18 марта 2009

Я не думаю, что есть простой способ сделать это, который работает со всеми браузерами и шрифтами. Лучший способ - просто убедиться, что ваш макет не сломается, если кто-то введет 25 * m.

Полезно разделить слова, содержащие более X букв. Если css с переносом слов работает не так хорошо на всех браузерах.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...